弹性布局display:flex

1.flex-direction：设置伸缩项目的排列方式，即主轴的方向

row    设置从左到右排列

row-reverse    设置从右到左排列

column    设置从上到下排列

column-reverse    设置从下到上排列

2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素

flex-start    伸缩项目以起始点靠齐

flex-end    伸缩项目以结束点靠齐

center    伸缩项目以中心点靠齐

space-between    伸缩项目平局分布

space-around    同上，但两端保留一半的空间

ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        justify-content:space-around;
    }
    li{
        width:200px;
        height: 200px;
       
        text-align: center;
        line-height: 200px;
    }

3.align-items：调整侧轴方向对齐方式

flex-start    伸缩项目以顶部为基准，清理下部额外空间

flex-end    伸缩项目以底部为基准，清理上部额外空间

center    伸缩项目以中部为基准，平均清理上下部额外空间

baseline    伸缩项目以基线为对齐，清理额外的空间

stretch    伸缩项目填充整个容器，默认

    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }

    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:stretch;
        justify-content:space-between;
    }
    li{
        width:200px;//指定高度，才能拉伸
       
        text-align: center;
        line-height: 200px;
    }

4.flex-wrap控制是否换行

nowrap    默认值，都在一行或一列显示 ，会自动改变盒子内元素宽度

wrap    伸缩项目无法容纳时，自动换行

wrap-reverse    伸缩项目无法容纳时，自动换行，方向和 wrap 相反

5.align-content：堆栈排列，应用flex-wrap：wrap后换行进行控制，调整行之间的位置。用于多行，要设置父容器的高度

flex-start

flex-end

center

space-between

space-around

stretch默认

6.flex-flow：flex-direction和flex-wrap的简写

7.flex：控制伸缩容器内父盒子剩余空间的分配比例

    li{
       
        text-align: center;
        line-height: 100px;
        margin:10px;
    }
    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }

 

    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }
    li:nth-child(4){
        width:400px;
    }

8.align-self，子元素覆盖父元素设置的align-items，属性值也是flex-start、flex-end、center、baseline、stretch

    ul{
        align-items:flex-start;
    }
    li:nth-child(2){
        align-self:center;
    }

9.order，设置伸缩项目的顺序

    li:nth-child(1){
        order:3;
    }
    li:nth-child(2){
        order:1;
    }
    li:nth-child(3){
        order:2;
    }

转载于:https://www.cnblogs.com/lee1993/p/6641564.html