CSS display:flex属性

介绍

CSS中的display属性是用来定义元素的显示类型的，可以控制元素以何种方式呈现在页面上。其中，display的值之一为flex，它用于创建弹性容器，可以实现灵活的布局。

本文将详细介绍display:flex属性的用法和功能，包括弹性容器和弹性项目的设置，以及常见的布局效果。同时，还会给出一些实例代码并展示其效果。

弹性容器（Flex Container）

在display:flex属性中，包裹着内容的元素被称为弹性容器（flex container）。弹性容器将其子元素视为弹性项目（flex item），并可通过一系列属性来控制子元素的排列和布局。

属性：

弹性容器有以下几种常见的属性：

flex-direction（主轴的方向）：默认值为row，即水平方向。常见取值有：
- row：水平方向，从左到右。
- column：垂直方向，从上到下。
- row-reverse：水平方向，从右到左。
- column-reverse：垂直方向，从下到上。
flex-wrap（换行）：默认值为nowrap，即不换行。
- nowrap：不换行，子元素会挤在一行内显示。
- wrap：换行，子元素会自动换到下一行。
- wrap-reverse：换行，子元素从下一行开始排列。
flex-flow（flex-direction和flex-wrap的简写）：可同时设置flex-direction和flex-wrap的值。
justify-content（主轴上的对齐方式）：默认值为flex-start，即从左侧开始。常见取值有：
- flex-start：从左侧开始对齐。
- flex-end：从右侧开始对齐。
- center：居中对齐。
- space-between：两端对齐，项目之间的间隔相等。
- space-around：每个项目两侧的间隔相等，项目之间的间隔是相邻项目间隔的两倍。
align-items（交叉轴上的对齐方式）：默认值为stretch，即拉伸显示。常见取值有：
- flex-start：从交叉轴的起点开始对齐。
- flex-end：从交叉轴的终点开始对齐。
- center：居中对齐。
- stretch：拉伸显示，使得子元素沿交叉轴充满整个容器。
align-content（多行的交叉轴上的对齐方式）：默认值为stretch，即拉伸显示。常见取值有：
- flex-start：从交叉轴的起点开始对齐。
- flex-end：从交叉轴的终点开始对齐。
- center：居中对齐。
- stretch：拉伸显示，使得子元素沿交叉轴充满整个容器。

实例代码1：

以下是一个简单的弹性容器示例，通过设置弹性容器的属性，实现了子元素水平居中对齐。

<style>
    .container {
        display: flex;
        justify-content: center;
    }
    .item {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

弹性项目（Flex Item）

在弹性容器中的子元素被称为弹性项目（flex item），这些项目可以通过属性来控制其在容器内的位置和大小。

属性：

弹性项目有以下几种常见的属性：

flex-grow（放大比例）：默认值为0。可为弹性项目设置放大比例，当弹性项目未占满容器时，根据放大比例进行分配。放大比例越大，弹性项目占据的空间越大。
flex-shrink（缩小比例）：默认值为1。可为弹性项目设置缩小比例，当弹性项目超出容器可用空间时，根据缩小比例进行收缩。缩小比例越大，弹性项目收缩的幅度越大。
flex-basis（基准值）：默认值为auto。设置弹性项目的初始宽度或高度，可以为具体数值或百分比。
flex（flex-grow、flex-shrink和flex-basis的简写）：可同时设置flex-grow、flex-shrink和flex-basis的值。
align-self（单个项目的对齐方式）：默认值为auto，即继承父容器的对齐方式。可根据需要对弹性项目单独设置对齐方式。

实例代码2：

以下是一个弹性容器中使用弹性项目实现两侧对齐的示例代码，其中两个弹性项目的宽度分别为200px和300px。

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
    .item {
        height: 100px;
        background-color: red;
    }
    .item1 {
        width: 200px;
    }
    .item2 {
        flex: 1;
        width: 300px;
    }
</style>

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
</div>

布局效果

通过使用display:flex属性，可以实现灵活多样的布局效果。以下是一些常见的布局效果：

水平居中和垂直居中

通过justify-content属性可以实现水平居中对齐，通过align-items属性可以实现垂直居中对齐。

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        background-color: #efefef;
    }
    .item {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="item"></div>
</div>

等分布局

通过设置flex属性，可以实现弹性项目在容器中等分布局。

<style>
    .container {
        display: flex;
        justify-content: space-between;
        height: 200px;
        background-color: #efefef;
    }
    .item {
        flex: 1;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

自适应布局

通过设置flex属性，可以实现弹性项目在容器中根据内容多少自适应布局。

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        height: 200px;
        background-color: #efefef;
    }
    .item {
        flex: 1 1 200px;
        height: 100px;
        background-color: red;
    }
    .item:nth-child(odd) {
        flex: 1 1 100px;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>