开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十天,点击查看活动详情

深入解析CSS(第N天)

flex布局的属性

前面两篇文章都已经讲解了flex,但是flex比较核心的点是它的的属性,了解它的属性你能更好且有效的使用flex布局

flex-wrap属性

flex-wrap其实和word-wrap属性类似,都是指定是否换不换行,但是word-wrap表示的是如果文字超过宽度则换行,而felx-wrap则是超过宽度,弹性子元素换行.

flex-wrap它可以设置为nowrap（初始值）、wrap或者wrap-reverse。启用换行后，子元素不再根据flex-shrink值收缩，任何超过弹性容器的子元素都会换行显示。

flex-flow

flex-flow属性是flex-direction和flex-wrap的简写。例如，flex-flow:column wrap指定弹性子元素按照从上到下的方式排列，必要时换到新的一列。

justify-content(重点)

这个或许是用得最多而且最满足我们需求的一个属性,使用它我们能快速水平居中,也能均分数据

align-items

justify-content控制子元素在主轴方向的对齐方式，align-items则控制子元素在副轴方向的对齐方式。align-items的初始值为stretch，在水平排列的情况下让所有子元素填充容器的高度，在垂直排列的情况下让子元素填充容器的宽度，因此它能实现等高列。其他的值让弹性子元素可以保留自身的大小，而不是填充容器的大小。

align-self

有时我们可能会想着某些弹性子元素并不想居中对齐,而且向左对齐,这时我们可以就可以使用align-self对弹性子元素设置独立的对齐方式,支持的参数和align-items一样:flex-start、flex-end、center、stretch以及baseline

order

有时我们可能需要对某个元素进行更换位置或者排序等等,order可以改变子元素排列的顺序,所有的弹性子元素都将根据order的大小来以此排序,并不会因为源码的顺序而定,初始状态下，所有的弹性子元素的order都为0。指定一个元素的值为−1，它会移动到列表的最前面；指定为1，则会移动到最后。可以按照需要给每个子元素指定order以便重新编排它们。这些值不一定要连续。