弹性父元素属性

将元素设置为弹性盒display:flex;

默认将自上而下排列的元素实现自左向右在一排显示，不会造成高度塌陷，子元素如果是内联元素一样可以设置宽高（如果内联元素想设置宽高最好写上display:block）

flex-direction属性

Row  自左向右  默认值

Column 自上而下

Column-reverse  自上而下翻转 整体翻转（原来在最上边 之后在最下边）

Row-reverse  自左向右翻转 整体翻转（原来在最左边 之后在最右边）

htmlcss
    <div class="div div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="div div2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="div div3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="div div4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    div{
        height: 200px;
        width: 200px;
        margin: 20px;
        border: black 2px solid;
        display: flex;
    }
    .div>div{
        height: 30px;
        width: 30px;
        line-height: 30px;
        margin: 5px;
    }
    .div1{
        flex-direction:row;
    }
    .div2{
        flex-direction:row-reverse;
    }
    .div3{
        flex-direction: column;
    }
    .div4{
        flex-direction: column-reverse;
    }

试一试

flex-wrap

Nowrap 不允许换行 默认值

Wrap 允许换行

Wrap-reverse 允许换行整体翻转

htmlcss
    <div class="div div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
    <div class="div div2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
    <div class="div div3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
    div{
        height: 200px;
        width: 200px;
        margin: 20px;
        border: black 2px solid;
        display: flex;
    }
    .div>div{
        height: 30px;
        width: 30px;
        line-height: 30px;
        margin: 5px;
    }
    .div1{
        flex-wrap:nowrap;
    }
    .div2{
        flex-wrap:wrap;
    }
    .div3{
        flex-wrap:wrap-reverse;
    }

试一试

flex-flow

弹性子元素的排列方式以及是否允许换行的复合写法

flex-flow: <flex-direction> <flex-wrap>;

justify-content

弹性子元素在弹性父元素中主轴的对齐方式

Flex-start    默认

Flex-end

Center     中间

Space-around    中间是两端的倍数

Space-between    到两端去

Space-evenly    平均分配

htmlcss
    <div class="div div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div6">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    div{
        height: 200px;
        width: 600px;
        margin: 20px;
        border: black 2px solid;
        display: flex;
    }
    .div>div{
        height: 30px;
        width: 30px;
        line-height: 30px;
        margin: 5px;
    }
    .div1{
        justify-content:flex-start;
    }
    .div2{
        justify-content:flex-end;
    }
    .div3{
        justify-content:center;
    }
    .div4{
        justify-content:space-around;
    }
    .div5{
        justify-content:space-between;
    }
    .div6{
        justify-content:space-evenly;
    }

试一试

弹性盒的主轴位置取决于弹性子元素的对齐方式，如果是自左向右排列此时x轴为主轴；如果是自上而下排列此时y轴为主轴。

align-items

弹性子元素在弹性父元素中侧轴的对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

htmlcss
    <div class="div div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="div div5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    div{
        height: 200px;
        width: 600px;
        margin: 20px;
        border: black 2px solid;
        display: flex;
    }
    .div>div{
        width: 30px;
        height: auto;
        line-height: 30px;
        margin: 5px;
    }
    .div>div:nth-child(2){
        height: 50px;
        line-height: 50px;
    }
    .div1{
        align-items:flex-start;
    }
    .div2{
        align-items:flex-end;
    }
    .div3{
        align-items:center;
    }
    .div4{
        align-items:baseline;
    }
    .div5{
        align-items:stretch;
    }

试一试

弹性盒的侧轴位置取决于弹性子元素的对齐方式，如果是自左向右排列此时y轴为侧轴；如果是自上而下排列此时x轴为侧轴。

align-content

当弹性子元素存在多行时设置行的对齐方式（此属性必须与flex-wrap连用）

Flex-start  默认

Flex-end

Center  中间

Space-around  中间是两端的倍数

Space-between  到两端去

Space-evenly  平均分配

htmlcss
    <div class="div div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <div class="div div2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <div class="div div3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <div class="div div4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <div class="div div5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <div class="div div6">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    div{
        height: 600px;
        width: 400px;
        margin: 20px;
        border: black 2px solid;
        display: flex;
    }
    .div>div{
        width: 60px;
        height: auto;
        line-height: 30px;
        margin: 5px;
    }
    .div>div:nth-child(3){
        width: 90px;
    }
    .div>div:nth-child(6){
        width: 30px;
    }
    .div1{
        flex-wrap:Wrap ;
        align-content:Flex-start;
    }
    .div2{
        flex-wrap:Wrap ;
        align-content:Flex-end;
    }
    .div3{
        flex-wrap:Wrap ;
        align-content:Center;
    }
    .div4{
        flex-wrap:Wrap;
        align-content:Space-around;
    }
    .div5{
        flex-wrap:Wrap ;
        align-content:Space-between;
    }
    .div6{
        flex-wrap:Wrap ;
        align-content:Space-evenly;
    }

试一试

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。