该文是本人的译文，如想看原文请点击传送门
如需转载请注明来源与作者
讲解分为两部分，一部分讲解的是
container的属性，另一部分讲解children属性。本文讲解
container的属性。讲解的另外一篇传送门。
Paste_Image.png
先从包裹容器（constainer）开始讲起
Properties for the Parent
disaplay:
这个属性定义了
flex的容器，容器以inline或者block显示取决于你给的属性。它能够给直接子元素提供一个flex的环境。
.container {
display : flex; /* or inline-flex */
}
要注意的是这个属性的不在
container上生效。
flex-direction
flex-direction
这个属性建立了一个主轴，因此规定了
flex container的子元素items的方向，弹性盒子（Flexbox）是（除了换行选项）一个单一方向的布局方式。把弹性元素的主要布局方式看作要么是水平方向，要么是垂直方向。
.container {
flex-direction : row | row-reverse | column | column-reverse;
}
这里对每个属性进行说明：
-
row(默认属性)： 第一位依次从左边到右边 -
row-reverse： 第一位依次从右边到左边。 -
column：与row类似，但是是从上到下。 -
column-reverse：与row-reverse类似，但是是从下到上
flex-wrap
flex-wrap
在默认情况下，弹性元素会总是想要只占一行。你可以改变它的默认值，并且元素是否换行会根据它自己身上的属性去做出改变。
.container{
flex-wrap:nowrap|wrap|warp-reverse
}
这里对每个属性进行说明：
-
nowrap（默认属性）：所有的弹性元素总是会在一行。 -
wrap：所有弹性元素会根据自身从上到下去换行。 -
wrap-reverse：所有弹性元素会根据自身从下到上去换行
flex-flow
这是
flex-direction和flex-wrap的组合属性，它们一起定义了弹性容器的主轴和纵轴。默认值是 row,nowrap。
flex-flow : <'flex-direction'>||<'flex-wrap'>
justify-content
justify-content
这个属性规定了元素在横轴上的排列。这个属性能够给元素分配剩余空间，不管这些占据一行弹性元素且是非弹性的，或者元素有弹性并且达到它们的最大值。当元素溢出一行，它总是能在对齐元素施加控制。
.container{
justify-content : flex-start|flex-end|center|space-between|space-around;
}
这里对每个属性进行说明：
-
flex-start（默认值）：元素分布在行的开头边缘。 -
flex-end：元素分布在行的开头结尾。 -
center：元素沿着行的中间排布。 -
space-between：元素均匀地分布在一行；第一个元素在行的开头，最后一个元素在行的结尾。 -
space-around：元素拥有等份的间隔，均匀地分布在一行。要注意的是通常这些间隔是不相等的大小，只有分布在两侧的元素才有相等的间隔。第一个元素会有1个单位的间隔对应最后一个元素的一个间隔，但是之外靠近旁边元素的间隔会有2个单位，这是因为旁边的元素也有1个单位的间隔分配。
align-items
align-items
这个属性定义了弹性元素怎么在纵轴方向是如何布局。可以把它看做
justify-content在纵轴上的另一个版本
.container{
align-items:flex-start|flex-end|center|baseline|strech;
}
这里对每个属性进行说明：
-
flex-start：弹性元素沿着辅轴的的边缘分布在列的开头； -
flex-end：弹性元素沿着辅轴的的边缘分布在列的结尾； -
center：元素在辅轴居中。 -
baseline：元素根据它的基线对齐。 -
strech(默认值)：元素伸展开直到充满整个容器。
align-content
align-content
当纵轴上有额外的剩余空间会对齐排成一行的弹性元素，与
justify-content如何对齐横轴单个元素的方法类似。
NOTE：当只有一行弹性元素该属性不会生效。并且如果要使用之前最好先使用
flex-wrap:wrap
.container{
flex-wrap:wrap;
align-content:flex-start;/* flex-end | center | stretch | space-between | space-around */
}
这里对每个属性进行说明：
-
flex-start: 每一行都会挤在父元素的起始位置。 -
flex-end: 每一行都会挤在父元素的尾部。 -
center：每一行都会挤在父元素的中间。 -
space-between: 每一行会呈现分布式。第一行在父元素的起始位置。而最后一行在尾部。 -
space-around: 每一行最终都会分配到相等的空间围绕着它。 -
stretch(默认)`: 每一行都会伸展开来占领剩余空间。
网友评论