css布局之Flex布局（一）|青训营因为笔者听了几节css的课程，感觉只是了解了个大概，实际项目时很多属性和布局都想不

因为笔者听了几节css的课程，感觉只是了解了个大概，实际项目时很多属性和布局都想不起来，因此也是借青训营这个机会督促一下自己学习、整理一下CSS的各种知识。以下将会基于一些简单的项目小组件以及对文档的解读来介绍复习&加深一下印象。

什么是Flex布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

Flex布局的精髓在两根轴线和父子容器。

两根轴线

Flex布局有两根轴线：主轴和交叉轴。

主轴和交叉轴并不是固定的，flex-direction属性决定了主轴的方向，而交叉轴的方向又由主轴确定。如果主轴选择了row 或 row-reverse属性，主轴将沿着左右方向延伸，交叉轴的方向就是沿着列向下的；主轴选择 column 或者 column-reverse 时，会沿着上下方向延伸，而交叉轴就是水平方向。

父容器`flex container`和子容器`flex item`

将一个容器的属性display改为 flex 或者 inline-flex后，容器中的直系子元素就会变为 flex 元素。父容器和子容器都各有六个属性。默认下，子元素会有如下初始值

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
[flex-basis] 属性为 auto。
[flex-wrap] 属性为 nowrap。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

父容器

flex-direction属性：决定子元素的排列方向（主轴）。

flex-wrap属性：定义换行。

flex-flow属性：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

align-content属性：定义了多根轴线的对齐方式。

justify-content属性：定义了子元素在主轴上的对齐方式。

align-items属性：定义了子元素在交叉轴上如何对齐。

其中，justify-content属性和align-items属性是使用最多的。

尝试一下

我们就justice-content和align-item属性来试一下。假设我们有这么两个组件，将要实现如下图的效果。我们分别使用justice-content来实现第一个组件，align-item来实现第二个组件。

`justify-content`

html代码如下：

    <div class="test">
        <detail-section title="css-testing" moreText="more">  
                <div class="comment">
                <template v-for="(item, index) in test.hotelSummary">
                    <div class="item">
                        <div class="title">{{ item.title }}</div>
                        <div class="introduction">{{ item.introduction }}</div>
                        <div class="tip">{{ item.tip }}</div>
                    </div>
                </template>
            </div>
        </detail-section>
    </div>
</template>

可以看到，父容器为comment,子元素分别是title,introduction和tip 设置一下字体样式后成为下图效果。

flex-start：开头对齐。

.comment {
    display: flex;
    justify-content: flex-start;
    }

flex-end：结尾对齐。

center：居中。

显然我们以上三个属性都不是很符合要求，因此需要使用分布排列。

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

最符合需求的应该是space-between属性。

`align-items`

我们要用align-items实现如下效果。

html代码如下：

    <div class="test">
        <detail-section title="css-testing" moreText="more">
            <div class="head">
                    <div class="left">
                        <div class="score">
                            <span class="text">{{ test.overall }}</span>
                            <div class="line"></div>
                        </div>
                        <div class="info">
                            <div class="scoreTitle">{{ test.scoreTitle }}</div>
                            <div class="total">共{{ test.totalCount }}条评论</div>
                            <van-rate v-model="value" color="#ffd21e" readonly />
                        </div>
                    </div>
                    <div class="right">
                        <template v-for="(item, index) in test.subScores">
                            <span class="ltag">{{ item }}</span>
                        </template>
                    </div>
                </div>
        </detail-section>
    </div>
</template>

实现效果如下：