flex布局

原创已于 2022-08-08 09:56:14 修改 · 4.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-07-30 11:33:05 首次发布

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了flex布局的基本概念，包括flex-direction、flex-wrap、justify-content和align-items等关键属性，以及如何通过order和align-self控制子元素。掌握这些，让你轻松构建响应式和灵活的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是flex布局？

flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 flex 布局。

二、flex布局都用到哪些属性：

1、父项常见的属性：

1、flex-direction调整主轴方向：row（默认值）、row-reverse、 column 、column-reverse ； row：默认X轴为主轴方向（水平）、column：默认Y轴为主轴方向（竖直）、 row/column-reverse：在此方向基础上翻转（下面展示的是row-reverse）

    <style>
        .f {
            width: 500px;
            height: 300px;
            display: flex;  /*使用flex布局必须写*/
            background-color: coral;
            flex-direction: row-reverse; /* 主轴方向 */
        }
        .s{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: burlywood;
        }
    </style>

2、 flex-wrap控制是否换行： nowrap（默认值不换行）、wrap、wrap-reverse; wrap-reverse 按照主轴方向排列，如果是X轴为主轴，换行的那一行在之前几行的上方，若Y轴为主轴，那换行的那一行在之前几行的右方。（因为我设置了border 所以每四个换一次行，不设置边框是五个）

            flex-wrap: wrap-reverse; /*是否换行*/

3、flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: row wrap; /*同时设置 主轴方向 和 是否换行*/

4、 justify-content：设置主轴上的子元素排列方式：flex-start（默认值）、flex-end、center、space-between、space-around

flex-start 默认值、 flex-end:从尾部开始排列，类似于翻转但元素位置不变、center居中、 space-between(先让两边贴边，再平分)、 space-around(平分剩余空间)

5、align-items：设置侧轴上的子元素排列方式（单行)：stretch(默认值)、center、flex-start、flex-end

stretch(默认值):项目被拉伸以适应容器、在不设置高情况下拉伸到与主轴高一致、center：项目位于容器的中心、flex-start：项目位于容器的开头，垂直对齐开始位置、 flex-end：项目位于容器的结尾，垂直对齐结束位置（位置在侧轴末尾）

6、align-content：设置侧轴上的子元素排列方式（多行)：stretch(默认值)、center、flex-start、flex-end、space-between、space-around

stretch：默认值，项目被拉伸以适应容器（只有当子元素没设置高时才会生效）。center：项目位于容器的中心。flex-start：项目位于容器的开头。flex-end：项目位于容器的结尾。 space-between：项目位于各行之间留有空白的容器内。(中间空白)、space-around 项目位于各行之前、之间、之后都留有空白的容器内。注：必须设置以下属性才会起作用。对父元素设置自由盒属性display:flex ；设置排列方式为横向排列flex-direction:row；设置换行flex-wrap:wrap;

2、子项常见的属性：

1、order控制子项目的排列顺序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

        .s:nth-child(1) {
            order: 10;
        }

        .s:nth-child(2) {
            order: 0;
        }

        .s:nth-child(3) {
            order: 8;
        }

        .s:nth-child(4) {
            order: 1;
        }