4、justify-content
定义了子元素.son元素的对齐方式,默认是左对齐。五个值可选。
.fatcher{ justify-content: flex-start flex-end center space-between space-around; }
值的含义分别为:左对齐(默认),右对齐,居中对齐,两端对齐,每个子元素.son两侧的间隔相等;
效果分别为:
5、align-items
定义子元素.son在轴上怎么对齐,默认是沾满整个容器。五个值可选。
.fatcher{ align-items: flex-start flex-end center baseline stretch; }
值的含义分别为:轴的起点对齐、轴的终点对齐、轴的中心点对齐、子元素.son元素的第一行文字的基线对齐、默认值,如果子元素.son未设置高度或设为auto,将占满整个容器的高度。效果如图所示:
6、align-content
定义了多根轴线的对齐方式。如果子元素.son只有一根轴线,该属性不起作用。
.fatcher{ align-content: flex-start flex-end center space-between space-around stretch; }
含义分别为:轴的起点对齐、轴的终点对齐、轴的中心点对齐、与轴两端对齐,轴线之间的间隔平均分布、轴线占满整个交叉轴。效果与align-items类似,在这就不显示了。
(2)子元素
说完父元素的属性,再来说说子元素.son的属性值有哪些,同样六个:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order
定义子元素.son的排列顺序。数值越小,排列越靠前,默认为0。
写法:
.son{ order:1/2/3/-1; }
效果如图:
2、flex-grow
定义子元素.son的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有子元素.son的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个子元素.son的flex-grow属性为2,其他子元素.son都为1,则前者占据的剩余空间将比其他子元素.son多一倍。效果如下:
3、flex-shrinK
定义了子元素.son的缩小比例,默认为1,即如果空间不足,该元素将缩小。
如果所有子元素.son的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个子元素.son的flex-shrink属性为0,其他子元素.son都为1,则空间不足时,前者不缩小。
.son{ flex-grow: <number>; / default 0 / }
4、flex-basis
属性定义了在分配多余空间之前,子元素.son占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素.son的本来大小。它可以设为跟width或height属性一样的值(比如350px),则子元素.son将占据固定空间。
5、Flex
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
6、align-self
属性允许单个子元素.son有与其他子元素.son不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item { align-self: auto flex-start flex-end center baseline stretch; }
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
三、总结
flex 12个属性中,我在移动端开发常用的属性有:flex-direction 、justify-content 、flex-flow 、align-items (解决垂直对齐问题)、flex-grow 、flex-shrinK (图片容器不想它随便改变,就使用次属性),比如flex-direction当此属性值为column column-reverse(垂直轴)时,可以解决一个困扰我们的问题,当内容太少,footer会跳上来,而我们又想固定footer在底部,当内容增加时,自动撑开,而又不想使用position: fixed。
当然,用途可不止这么点,还待前端同学们自己去挖掘,通过此博客不难看出,每一个知识点如果要细分的话,是需要大量的时间去研究的,前端之路任重而道远,加油!