学习笔记 Flex知识点汇总(Flex学习笔记：核心知识点全面汇总)

原创

ithorizon 7个月前 (10-20) 阅读数 22 #后端开发

Flex学习笔记：核心知识点全面汇总

一、Flex布局简介

Flex布局，即弹性布局（Flexible Box Layout），是一种用于在CSS中创建灵活的布局设计的布局模式。Flex布局能够适应不同屏幕大小和分辨率，为开发者提供了一种更加高效和简洁的布局做法。

二、Flex布局的基本概念

Flex布局包含以下基本概念：

容器（Flex Container）

子项（Flex Item）

主轴（Main Axis）

交叉轴（Cross Axis）

三、怎样使用Flex布局

要使用Flex布局，首先需要将一个元素设置为Flex容器。这可以通过将display属性设置为flex或inline-flex来实现。


    .flex-container {
        display: flex;
    }

四、Flex容器的属性

Flex容器具有以下属性：

flex-direction：定义主轴的方向。

flex-wrap：定义子项是否换行。

flex-flow：是flex-direction和flex-wrap属性的简写形式。

justify-content：定义子项在主轴上的对齐做法。

align-items：定义子项在交叉轴上的对齐做法。

align-content：定义多行子项在交叉轴上的对齐做法。

4.1 flex-direction属性

flex-direction属性定义了主轴的方向，有以下四个值：

row：默认值，主轴为水平方向，子项沿水平方向排列。

row-reverse：主轴为水平方向，子项逆序排列。

column：主轴为垂直方向，子项沿垂直方向排列。

column-reverse：主轴为垂直方向，子项逆序排列。


    .flex-container {
        flex-direction: row; /* 默认值 */
    }

4.2 flex-wrap属性

flex-wrap属性定义了子项是否换行，有以下三个值：

nowrap：默认值，不换行。

wrap：换行。

wrap-reverse：换行，子项逆序排列。


    .flex-container {
        flex-wrap: wrap; /* 默认值 */
    }

4.3 flex-flow属性

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


    .flex-container {
        flex-flow: row wrap; /* 默认值 */
    }

4.4 justify-content属性

justify-content属性定义了子项在主轴上的对齐做法，有以下五个值：

flex-start：默认值，子项靠主轴起点对齐。

flex-end：子项靠主轴终点对齐。

center：子项居中对齐。

space-between：子项之间的间隔都相等，第一个子项靠主轴起点对齐，最后一个子项靠主轴终点对齐。

space-around：子项之间的间隔都相等，但是子项与主轴起点和终点的间隔是其他间隔的一半。


    .flex-container {
        justify-content: flex-start; /* 默认值 */
    }

4.5 align-items属性

align-items属性定义了子项在交叉轴上的对齐做法，有以下五个值：

stretch：默认值，子项在交叉轴上拉伸填充整个容器。

flex-start：子项靠交叉轴起点对齐。

flex-end：子项靠交叉轴终点对齐。

center：子项居中对齐。

baseline：子项的第一行文字基线对齐。


    .flex-container {
        align-items: stretch; /* 默认值 */
    }

4.6 align-content属性

align-content属性定义了多行子项在交叉轴上的对齐做法，有以下六个值：

stretch：默认值，子项在交叉轴上拉伸填充整个容器。

flex-start：子项靠交叉轴起点对齐。

flex-end：子项靠交叉轴终点对齐。

center：子项居中对齐。

space-between：子项之间的间隔都相等，第一个子项靠交叉轴起点对齐，最后一个子项靠交叉轴终点对齐。

space-around：子项之间的间隔都相等，但是子项与交叉轴起点和终点的间隔是其他间隔的一半。


    .flex-container {
        align-content: stretch; /* 默认值 */
    }

五、Flex子项的属性

Flex子项具有以下属性：

order：定义子项的排列顺序。

flex-grow：定义子项的放大比例。

flex-shrink：定义子项的缩小比例。

flex-basis：定义子项的基础大小。

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

align-self：允许单个子项有与其他子项不一样的对齐做法。

5.1 order属性

order属性定义了子项的排列顺序，数值越小，排列越靠前，默认值为0。


    .flex-item {
        order: 1; /* 默认值 */
    }

5.2 flex-grow属性

flex-grow属性定义了子项的放大比例，默认值为0，即如果存在剩余空间，也不放大。


    .flex-item {
        flex-grow: 1; /* 默认值 */
    }

5.3 flex-shrink属性

flex-shrink属性定义了子项的缩小比例，默认值为1，即如果空间不足，子项将等比例缩小。


    .flex-item {
        flex-shrink: 1; /* 默认值 */
    }

5.4 flex-basis属性

flex-basis属性定义了子项的基础大小，默认值为auto，即子项的原始大小。


    .flex-item {
        flex-basis: auto; /* 默认值 */
    }

5.5 flex属性

flex属性是flex-grow、flex-shrink和flex-basis属性的简写形式，默认值为0 1 auto。后两个属性可选。


    .flex-item {
        flex: 0 1 auto; /* 默认值 */
    }

5.6 align-self属性

align-self属性允许单个子项有与其他子项不一样的对齐做法，可以覆盖align-items属性。默认值为auto，描述继承父元素的align-items属性，如果没有父元素，则等同于stretch。


    .flex-item {
        align-self: auto; /* 默认值 */
    }

六、Flex布局的应用实例

以下是一个使用Flex布局的易懂示例：


    .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 200px;
    }
    .flex-item {
        flex: 1;
        margin: 0 10px;
        background-color: #f0f0f0;
        text-align: center;
        line-height: 200px;
    }

在这个示例中，我们创建了一个Flex容器，其中包含三个子项。子项沿着水平方向排列，并且间距相等。子项的高度被设置为与容器的高度一致，并且文本居中对齐。