CSS——弹性盒子布局

在父级使用的属性：

display：flex 

定义弹性盒子

div{
	display : flex
}

排列方式：

①flex-direction

指定弹性子元素在父容器中排列的方式

div{
     flex-direction : row               //默认。横向从左到右排列
                      row-reverse       //反转横向排列（右对齐，从后往前排，最后一项排在最前面）
                      column            //纵向排列
                      column-reverse    //反向纵向排列，从后往前排，最后一项排在最上面}

②flex-wrap

指定弹性盒子的子元素换行方式

div{
    flex-wrap : nowrap           //默认，弹性容器为单行，会忽略width，自动分宽
                wrap             //弹性容器为多行，根据width的宽度分行
                wrap-reverse     //反转wrap排列
}

③flex-flow

flex-direction属性和flex-wrap属性的复合属性

div{
    flex-flow : row wrap
}

水平或垂直对齐方式：

①justify-content

弹性子元素在父容器中主轴上水平或垂直对齐

div{
    justify-content : flex-start          //开始对齐
                      flex-end            //结束对齐
                      center              //居中对齐
                      spance-between      //平均对齐，两边无空隙，间隔平均分布
                      spance-around       //平均对齐，两边有空隙，两侧间隔相等
                      space-evenly        //平均对齐，间隔相等
}

②align-items

弹性子元素在父容器中侧轴上垂直或水平对齐

div{
    align-items : flex-start      //开始对齐
                  flex-end        //结束对齐
                  center          //居中对齐
                  baseline        //基线对齐
                  stretch         //默认值。拉伸到于父容器等高。要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸
}

③align-content

在弹性容器内的各项没有占用交叉轴上所有空间时垂直对齐容器内的各项

div{
    align-content : strech                   //默认，伸展占用剩余的空间
                    flex-start               //开始对齐
                    flex-end                 //结束对齐
                    center                   //居中对齐
                    space-between            //平均对齐，两边无空隙，间隔平均分布
                    space-around             //平均对齐，两边有空隙，两侧间隔相等
}

在子级中使用的属性：

①align-self

设置弹性元素自身在侧轴方向上的对齐方式

div{
    align-self : auto           //默认。元素继承了它的父容器的align-items属性，如果没有父容器则为stretch
                 flex-start     //开始对齐
                 flex-end       //结束对齐
                 center         //居中对齐
                 baseline       //基线对齐
                 stretch        //伸展占用剩余的空间
}

②order

用整数值来定义排列顺序，数值小的在前，可以为负值。

div{
    order : 1
}

分配空间的方式：

①flex-grow

定义弹性盒子元素的扩展比率

div{
    flex-grow : 0   //一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值为0
}

②flex-shrink

定义弹性盒子元素的收缩比率

div{
    flex-shrink : 1   //一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值为1
}

③flex-basis

定义弹性盒子元素的默认基准值

div{
    flex-basis : auto        //默认值。长度等于元素的长度。若没有指定长度，则根据内容决定长度
                 200px       //长度单位，规定元素的初始长度
                 20%         //百分比，规定元素的初始长度
}

☆flex

flex-grow、flex-shrink、flex-basis复合属性。指定弹性子元素如何分配空间

div{
    flex : none            //默认值。0 0 auto
           auto            //1 1 auto
           0 1 auto        //flex-grow flex-shrink flex-basis
}