CSS-Flex布局

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地址：
项目地址

原文链接:https://www.cnblogs.com/dreamHot/p/11415233.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有