CSS Flex布局

定义

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

用法

任何一个容器都可以指定为Flex布局

.box{
     
    display: flex;
}

行内元素也可以使用Flex布局

.box{
     
    display: inline-flex;
}

设为Flex布局后，子元素的float、clear和vertical-align属性将失效

概念

采用Flex布局的元素为Flex容器，容器的所有子元素为Flex项目

容器有两根轴，主轴（main axis）和交叉轴(cross axis)，主轴的开始位置叫做main start，结束位置叫做main end； 交叉轴的开始位置叫做cross start，结束位置叫做cross end

项目默认沿主轴排列，单个项目占据的主轴空间称为main size，占据的交叉轴空间称为cross size

容器的属性

容器共有6个属性

1. flex-direction确定主轴方向（即项目的排列方向），默认值为row

.box{
     
    flex-direction: row | row-reverse | column | column-reverse
}

2. flex-wrap定义换行方式，默认值为nowrap

.box{
     
    flex-wrap: nowrap | wrap | wrap-reverse
}

3. flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap
4. justify-content定义项目在主轴上的对齐方式，默认值为flex-start

.box{
     
    justify-content: flex-start | flex-end | center | space-between | space-around
}

5. align-items定义项目在交叉轴上的对齐方式，默认值为stretch

.box{
     
    align-items: flex-start | flex-end | center | baseline | stretch
    //baseline指项目的第一行文字的基线对齐
    //stretch 如果项目未设置高度或高度为auto时，将铺满整个容器的高度
}

6. align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，则该属性无效，默认值为stretch

.box{
     
    align-content: flex-start | flex-end | center | space-between | space-around |stretch
}

项目的属性

项目共有6个属性

1. order定义项目的排列顺序，数值小的排列靠前，默认为0

.item{
     
    order: <integer> //需为整数
}

2. flex-grow定义项目的放大比例，默认为0

.item{
     
    flex-grow: <number>
}

3. flex-shrink定义项目的缩小比列，默认为1，即如果空间不足，该项目将缩小

.item{
     
    flex-shrink: <number>
}

4. flex-basis定义了在分配多余空间之前，项目占据的主轴空间，默认为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间

.item{
     
    flex-basis: <length> | auto
}

5. flex是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性可选。

   该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

   建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

6. align-self定义单个项目的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.item{
     
    align-self: auto | flex-start | flex-end | center | baseline | stretch 
}