我要评论flex布局
对于我们平常遇到的问题的解决方法。
1.在父容器中的垂直居中。
2.使容器内的子项占据等量的空间（宽、高）。
3.使容器内的列等高排列。
在线查看flex布局示例及其属性使用，效果展现：
在线示例
下面是各个属性的描述：
.box{
display:flex;
}
设置容器的display属性为flex，如果是行内元素使用inline-flex.
flex-direction
定义子项如何排列。
.box{
flex-direction:row;
}
row:x轴排列，从左到右，
row-reverse:x轴排列，从右到左
column：y轴排列，从上到下
column-reverse:y轴排列，从下到上
flex-wrap
定义子项超出时，换行方式。
.box{
flex-wrap:wrap;
}
wrap:换行
nowarp:不换行
wrap-reverse：换行，反转排列
flex-flow是flex-direction/flex-wrap的缩写。
justify-content
定义子项横向排列时的样式。
.box{
justify-content:center;
}
flex-start：靠左
flex-end:靠右
center：居中
space-between：沿x轴均匀分配，两边不留空
space-around：沿x轴均匀分配，两边留空
align-items
定义子项纵向排列时的样式。
.box{
align-items:center;
}
flex-start:靠上
flex-end:靠下
center：垂直居中 **问题一
baseline：按照子项中第一行文本位置为基准水平线
stretch：所有子项纵向占满空间。 **问题三
子项的高度不能写死，不然stretch无效。
align-content
有多行子项时的排列样式（即 flex-wrap属性必须是wrap）
.box{
align-content:center;
}
flex-start:靠上
flex-end:靠下
center：垂直居中
space-between：沿y轴分配，上下边不留空
space-around：沿y轴均匀分配，上下边留空
stretch：纵向铺满
子项只有一行时不生效。
子项item高度不能写死，不然stretch不生效。
项目的属性
order
定义子项的排列顺序，默认0。数值越小越靠前
.box-item:nth-of-type(1){
order:-1;
}
.box-item:nth-of-type(3){
order:2;
}
flex-frow
定义项目的放大比列，默认0不放大。
.box-item{
flex-grow:1;
}
值一样时平均分配空间。
值不一样时按值比例分配。
flex-shrink
定义项目的缩小比列，默认1缩小。为0时不缩小。
.box-item:nth-of-type(2){
flex-shrink:0;
}
flex-basis
定义项目在占据多余空间时的分配。auto为原大小
.box-item:nth-of-type(3){
flex-basis:300px;
}
分配的大小超过主轴空间，按比列分配空间。
flex 是flex-grow/flex-shrink/flex-basis的缩写。
align-self
与容器的align-item对应，定义子项自己的排列位置。默认auto
.box-item:nth-of-type(2){
align-self:flex-start;
}
.box-item:nth-of-type(3){
align-self:flex-end;
}
.box-item:nth-of-type(3){
align-self:center;
}
auto:默认
flex-start:靠上
flex-end:靠下
center:垂直居中
baseline：以及元素第一行文本为基准线
stretch:占满纵向空间。
示例github地址：
项目地址
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论