【CSS】详解flex布局详解flex弹性布局，包括flex-container的各种属性、flex-item的各种属性

flex 弹性布局

设置了flex布局的容器称为flex container，该容器内部的元素称为flex item，flex item元素具有以下特点。

flex item不再区分行内级/块级元素的特性，其默认宽高由内容决定，但宽高可以设置。
flex item默认水平排布，但其布局由flex container的属性控制。

flex布局中默认主轴方向从左往右，交叉轴方向从上往下，元素在一维方向上按主轴方向排布，在二维方向上按交叉轴方向排布，flex布局的模型如下图。

flex-container的属性

flex-direction 主轴方向

该属性作用于flex-container，指定其元素在一维方向上的排布方式，改变主轴方向时，交叉轴方向也会跟着改变，其值和效果如下。

row，默认值，即以行为主轴，如下图。
row-reverse，代表与row相反的方向，如下图。
column，如下图。
column-reverse，与column的方向相反，如下图。

flex-wrap 换行

该属性作用于flex-container，默认值为nowrap，不换行，一般需要设置为wrap以换行。

另外有值wrap-reverse（该值很少使用），使主轴转移至盒子的对面边界，原始情况如下图。

设置了wrap-reserve后如下图。

flex-flow 简写属性

flex-flow为flex-wrap和flex-direction的缩写属性，写法如：flex-flow:row wrap;。

justify-content 主轴对齐方式

justify-content属性作用于flex container，用于改变主轴的对齐方式（注意，他不改变元素的排列方式，仅仅改变对齐方式，类似于word中的对齐方式）。其值和效果如下。

flex-start：默认值，代表元素与main start对齐。如下图。
flex-end：元素与main end对齐。如下图。
center：元素与main center对齐，即居中对齐。如下图。
space-between：元素与main start和main end对齐，并且元素之间间距等分。如下图。
space-evenly：元素之间间距等分，且等于首尾元素与main start和main end的间距。如下图。
space-around：元素之间间距等分，且等于首尾元素与main start和main end的间距的两倍。如下图。

使用justify-content会遇到的问题

在多行排列时，若使用justify-content，比如为容器设置值为space-between，那么在当容器内最后一行的元素个数没法占满整一行的时候，期望效果如下。

但是实际效果如下。

此时有多种方式可以解决，一是放弃使用justify-content改为计算margin；这里着重介绍第二种方法，就是在容器最后添加列数-1个和其他子元素同等宽度的子元素，如下。

<style>
    .content> .last-line{
      width: 60px; //这里的宽度需要设置跟item一样
    }
</style>

<div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <span class="last-line"></span> //个数为列数-1
</div>

但是这里有一个缺点，就是在html中引入了其他元素。

align-items 交叉轴对齐方式

ustify-content属性作用于flex container，用于改变交叉轴的对齐方式（注意，他不改变元素的排列方式，仅仅改变对齐方式）。在进行理解时要将所有元素其看成一个整体，其值和效果如下。

normal：默认值，效果等同stretch。
flex-start：和cross start对齐。如下图。
flex-end：和cross end对齐。如下图。
center：最常用的值，代表元素和cross center对齐。如下图。
stretch：如果flex item元素没有高度，则它会被拉伸，否则设置该属性无效。如下图。
baseline：基线对齐。如下图。

align-content 多行元素在交叉轴上的对齐方式

该属性用于设置多行元素在交叉轴上的对齐方式，用法和justify-content类似。在进行理解时，要将一行元素看成一个小部分进行理解。该属性较少使用，仅在设置了高度值的容器时需要考虑。其值和效果如下。

strech：默认值，如果flex item元素没有高度，则它会被拉伸，否则设置该属性无效。如下图。

在设置了高度时，默认情况下，多行元素之间按照一定的底部间距排布，如下图。
flex-start：多行元素和corss start对齐。如下图。
flex-end：多行元素和corss end对齐。如下图。
center：和cross center对齐。如下图。
space-between：多行元素与cross start和cross end对齐，并且多行元素之间间距等分。如下图。
space-evenly（兼容性差）：多行元素之间间距等分，且等于首尾行元素与cross start和cross end的间距。如下图。
space-around：：多行元素之间间距等分，且等于首尾行元素与cross start和cross end的间距的两倍。如下图。