其实之前就有了解过 flex 的使用方式，但是因为在实际项目中使用不多，而 flex 布局的属性又很多，所以几乎是看一遍忘一遍。为了改善关于这一块知识点的缺乏，所以决定重新好好学习一遍 flex
Flex 容器
Flex 布局需要在一个容器中实现，这个容器叫做 flex 容器，可以通过 display 属性来声明
.container {
display: flex;
}
声明一个 flex 容器的值并不只有 flex，同时还有 inline-flex；前者对应块状元素，而后者则是行内元素。当声明了一个 flex 容器后，这个容器子元素的 float、clear、vertical-align 属性都将会失效
对于一个 flex 容器，我们还能够设置很多其他的属性来实现我们需要的效果
flex-direction
这个属性名其实很好理解，就是设置容器中的 flex item 的排列方向的，它有下面几个值：
- row <水平从左向右排列>
- row-reverse <水平从右向左排列>
- column <垂直从上到下排列>
- column-reverse <垂直从下到上排列>
由于容器内的排列方向有四种，如果每种方式都单独写一遍篇幅会过长，所以下面以 flex-direction: row; 为基准来下，其他的只需要做个方向上的变换就可以了
flex-wrap
在不设置这个属性的情况下，当所有 flex item 的总长度超过容器长度时，item 会超出容器，并不会换行，如下图
容器中实际上有 10 个 item，但并没有换行，而是超出了容器（图片上似乎看不出来，小伙伴们可以自己试试：）
但是当我们设置 flex-wrap 以后，就可以实现换行了，它的值有下面几个：
- nowrap <默认值，不换行>
- wrap <换行，新的一行在下面>
- wrap-reverse <换行，旧的一行在下面>
flex-flow
这个属性就很简单了，是上面两个属性的缩写，属性可以接受两个值，一个是 flex-direction 的值，另一个是 flex-wrap 的值
justify-content
这个属性的作用是决定 item 在他们的排列方向（当前是 row，水平向右）上的对齐方式
- flex-start <默认值，排列方向起始位置对齐>
- flex-end <排列方向结束位置对齐>
- center <居中对齐>
- space-between <两端对齐，如果有剩余空间，则等分成间隙>
- space-around <均匀分布，如果有空隙，两端会存在空隙，且两端空隙为中间空隙的一半>
align-items
这个属性也是决定对齐方式的，但与上一个属性不同的是，它决定的是当只有一行时 item 之间的对齐方式
- stretch <默认值，在 item 未设置高度的情况下，item的高将占满容器，这样每个 item 的高度都相同>
- flex-start <item 之间在起始位置（这里是顶部）对齐>
- flex-end <item 之间在结束位置（这里是底部）对齐>
- center <item 之间中部对齐>
- baseline <item 以它们内部第一行文字的基线为准对齐>
align-content
这个属性定义了当有多行时 item 之间的对齐方式
- stretch <默认值，在 item 未设置高度的情况下，item的高将占满这一行，这样每个 item 的高度都相同>
- flex-start <item 在起始位置（这里是顶部）对齐>
- flex-end <item 在结束位置（这里是底部）对齐>
- center <item 之间中部对齐>
- space-between <两端对齐，如果有剩余空间则平分成为间隙>
- space-around <均匀分布，如果有空隙，两端会存在空隙，且两端空隙为中间空隙的一半>
最后几张图做的有点疯狂又没做处理，嘿嘿嘿，将就看将就看
扫码关注前端周记公众号
网友评论