保姆级 Flex Box 布局详解(上)—容器属性

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

我们先看一张图，我们布局都是容器中添加一些元素，这些元素有时候是先行后列排列，有的是先列后行排列。然后每一个元素间还有一些位置关系，元素在某一个方向，行或列方向上是如何分布。我们可以想象，一一罗列各种各样的可能。Flex box 以其灵活性对于这些布局通过属性的组合都给出了满意的答案。接下来我们就其有哪些属性给大家展开来介绍 Flex Box 布局。

现在随着互联网的迅速发展， web 应用在 PC 端和移动端也是日新月异，而且现在大家越来越注重 UI 设计和用户体验，所以对布局要求也就是越来越高。所以要快速应付那些响应式布局，我们就需要更好更快的工具，这也就是我为什么今天要学习 Flex box 这种布局方式原因。

我们的属性可以分别属于容器(container)或者项目(item)，如上图

接下来我们准备好一个项目，分别创建 html 和 css 文件，有关其中内容就不做过多解释了，一目了然。

    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

.container{
    /* width: 600px; */
    /* height: 480px; */
    background-color: antiquewhite;
    border: 3px solid darkgray;

}
.box{
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-child(1){
    background-color:cadetblue;
}

.box:nth-child(2){
    background-color:darkslateblue;
}

.box:nth-child(3){
    background-color:chocolate;
}

应用 flex 布局

要应用 flex 布局，只要在 container 添加

.container{
    display: flex;
}

代码即可

.box{
    /* height: 100px; */
    width: 100px;
    line-height: 100px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

flex-direction

flex-direction 主要设置主轴方向，是水平方向还是垂直方向为主轴。默认是 flex-direction: row; 也就是水平方向为主轴，还有其他选项如

row-reverse
column
column-reverse

flex-wrap

默认是 nowrap 强制 item 显示在一行，如果切换为 wrap 可以多行来显示。

.box{
    /* height: 100px; */
    width: 300px;
    line-height: 100px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.container{
    /* width: 600px; */
    /* height: 480px; */
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

屏幕快照 2021-10-06 下午3.43.06.png

flex-direction: row;
flex-wrap: wrap-reverse;

justify-content

用于设置在主轴方向，项目分布情况，默认为flex-start

justify-content: flex-start;

end

space-around

所谓的 around 就是在每一个项目两侧的间距是相当的，所有靠近边的项目的到边距离是到其邻近项目距离的 1/2

space-between

space-evenly

项目之间间距是相等，项目到容器边的距离为 0

项目到项目，以及项目到容器边的距离是相等的

align-items

用于设置在侧轴方向，项目分布情况，默认为flex-start

有关 align-items 几个可选值大家可以自己去尝试一下，没有什么特别，除了 baseline 这个值以外，下面介绍一个这个值，带来给大家列出来了。如果熟悉排版或者用过 PS 应该对于 baseline 对齐并不陌生。

.container{
    /* width: 600px; */
    height: 480px;
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    align-items:baseline;
}

.box{
    /* height: 100px; */
    width: 100px;
    /* line-height: 50px; */
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    font-size: 1.25em;
}

.box:nth-child(2),.box:nth-child(5){
    background-color:darkslateblue;
}

.box:nth-child(3),.box:nth-child(6){
    background-color:chocolate;
    font-size: 2.25em;
}

align-content

这个大家可能会稍微 confusing，首先 align 应该是沿着侧轴的。这个是指多行分布，所以应该 wrap 结合使用

.container{
    /* width: 600px; */
    height: 480px;
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    align-items:baseline;
}
.box{
    /* height: 100px; */
    width: 300px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    /* font-size: 1.25em; */
}

.box:nth-child(2),.box:nth-child(5){
    background-color:darkslateblue;
}

.box:nth-child(3),.box:nth-child(6){
    background-color:chocolate;
    /* font-size: 2.25em; */
}

屏幕快照 2021-10-06 下午3.54.37.png

flex-start

屏幕快照 2021-10-06 下午3.55.12.png

flex-end

屏幕快照 2021-10-06 下午3.55.24.png

到现在为止已经介绍了容器上属性，大家可以自行组合这些属性来练习练习。