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

你可能感兴趣的:(css3)