Flex纵向排列详解

一、Flex布局简介

Flex布局是CSS3新增的一种布局方式，它是一种可以在不使用float，position和table的情况下实现灵活和可伸缩布局的方式。

Flex布局通过把容器划分成可伸缩的行和列，来给子元素布局定位。而且它还可以通过几个简单的属性设置控制元素是如何对其和扩展的。

二、Flex容器属性

1. display

设置容器为flex或inline-flex。

.container{
    display:flex;
}

2. flex-direction

设置主轴方向。有4个值：row（默认值，左到右）、row-reverse（右到左）、column（上到下）和column-reverse（下到上）。

.container{
    flex-direction: column;
}

3. flex-wrap

确定flex容器是单行显示还是多行显示。有3个值：nowrap（默认值，单行显示）、wrap（多行，左右方向）、wrap-reverse（多行显示，上下方向）。

.container{
    flex-wrap: wrap;
}

4. justify-content

控制子元素在主轴上的排列方式。有5个值：flex-start（默认值，从左到右），flex-end（从右到左），center（居中对齐），space-between（两端对齐，元素之间均匀分布），space-around（元素两侧均匀分布）。

.container{
    justify-content: center;
}

5. align-content

与justify-content类似，它控制子元素在交叉轴上的排列方式，但是只有多行显示的时候才有用。有6个值：flex-start（默认值，从上到下），flex-end（从下到上），center（居中对齐），space-between（两端对齐，元素之间均匀分布），space-around（元素两侧均匀分布），stretch（填满整个交叉轴）。

.container{
    align-content: center;
}

6. align-items

控制子元素在交叉轴上的对齐方式。有4个值：stretch（默认值，填满整个交叉轴），flex-start（从上到下），flex-end（从下到上），center（居中对齐）。

.container{
    align-items: center;
}

三、Flex子元素属性

Flex子元素一般称为Flex项

1. order

定义项的显示顺序。数值越小，排列越靠前，默认为0。

.item{
    order: 1;
}

2. flex-grow

定义项在主轴上的扩展比例，默认为0不扩展，与其他项的比例越大，该项就占据越多的空间。

.item{
    flex-grow: 1;
}

3. flex-shrink

定义项在主轴上的收缩比例，默认为1，表示当空间不足时，该项呈现收缩状态。

.item{
    flex-shrink: 1;
}

4. flex-basis

定义项在主轴方向上的基础（初始）宽度。它的默认值是auto，即元素的本来大小不受影响。

.item{
    flex-basis: 50%;
}

5. flex

flex属性是flex-grow、flex-shrink和flex-basis的简写方式。

.item{
    flex: 1 0 50%;
}

6. align-self

定义单个项在交叉轴上的对齐方式，优先级比align-items高。有4个值：auto（默认值，继承container元素的align-items属性），stretch（并不是绝对填满，而是被拉伸到与其它项一样的高度），flex-start（交叉轴起点对齐），flex-end（交叉轴终点对齐），center（交叉轴居中对齐）。

.item{
    align-self: center;
}

四、Flex纵向排列

如果要进行flex纵向排列，一般需要同时使用flex-direction和justify-content属性。

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

以上代码可以使flex的子元素在垂直方向上居中对齐。

在实践中，我们也可以使用align-items属性实现纵向居中对齐，例如：

.container{
    display: flex;
    align-items: center;
}

同时，我们可以使用margin属性对flex子元素进行伸缩来实现不同高度的纵向排列布局。例如：

.container{
    display: flex;
    flex-direction: column;
}
.item-1{
    height: 100px;
    margin-bottom: 20px;
}
.item-2{
    height: 150px;
    margin-bottom: 30px;
}
.item-3{
    height: 120px;
    margin-bottom: 40px;
}

以上代码可以实现一个简单的纵向排列布局，包含3个flex子元素，它们的高度和间距都是不同的。