弹性布局Flexbox-display：flex

最新推荐文章于 2024-09-14 13:04:57 发布

二大一

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量269

点赞数 3

分类专栏：一些基础知识和问题文章标签：前端 html css css3

本文链接：https://blog.youkuaiyun.com/NY_21/article/details/128700199

版权

一些基础知识和问题专栏收录该内容

5 篇文章

订阅专栏

Flexbox是一种一维布局模型，常用于创建响应式设计。它通过flex-direction属性控制主轴方向，如row或column，而align-items属性则处理元素在交叉轴的对齐。此模型简化了元素的定位和空间分配，无需依赖浮动或定位技术。

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

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。同时能够跟随网页的大小而进行调整。

基本概念

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）

行内（Inline），用于文本

表，用于二维表数据

定位，用于元素的明确位置

Flexbox元素

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

在 Flexbox 模型中，有三个核心概念：

flex 项（注：也称 flex 子元素），需要布局的元素

flex 容器，其包含 flex 项（父元素）

排列方向（direction），这决定了 flex 项的布局方向

Flex 容器

采用了 flexbox 的区域就叫做 flex 容器。设置容器即将容器的 display 属性值改为 flex 或者 inline-flex。容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。

元素从主轴的起始线开始。

元素不会在主维度方向拉伸，但是可以缩小。

元素被拉伸来填充交叉轴大小。

flex-basis 属性为 auto。

flex-wrap 属性为 nowrap。

Flex的轴线

主轴

主轴就像是平面二维直角坐标系上的轴，默认以容器的左上角顶点为原点，以圆点为坐标建立x轴和y轴

主轴由 flex-direction 定义，

可以取 4 个值：

row-reverse

column

column-reverse

row是在坐标系上沿x轴正向排序，即从左到右，起点在左上角

row-reverse是row的反转，即从右到左，起点在右上角

column是在坐标系上沿y轴正向排序，即从上到下，起点在左上角

column-reverse是column的反转，即从下到上，起点在左下角

 .box {
            margin-top: 20px;
            margin-left: 20px;
            padding：5px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 200px;
            background-color: rgb(213, 110, 110);
            display: flex;
            /* 从左到右 */
            /* flex-direction:row;  */
            /* 从右到左 */
            /* flex-direction:row-reverse; */
            /* 从上到下 */
            /* flex-direction:column; */
            /* 从下到上 */
            flex-direction:column-reverse; 
        }
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }

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

交叉轴

交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

align-items属性

align-items 属性可以使元素在交叉轴方向对齐。

flex-start：按照容器的顶部对齐。

flex-end：按照容器的底部对齐。

center：在容器居中对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<style>
        .box {
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            background-color: rgb(213, 110, 110);
            display: flex;
            flex-direction:row; 
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: stretch; */
            /* align-items: baseline; */
            align-items: center;
            
        }
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }
    </style>

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

align-content 属性

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

<style>
        .box {
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            background-color: rgb(213, 110, 110);
            display: flex;
            flex-direction:row; 
            flex-wrap: wrap;
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            align-content: stretch;
        }
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }
    </style>

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

多行Flex容器flex-wrap

flex-wrap 属性规定是否应该对 flex 项目换行。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

<style>
        .box {
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            background-color: rgb(213, 110, 110);
            display: flex;
            flex-direction:row; 
            /* flex-wrap: wrap; */
            flex-wrap: nowrap;
        }
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }
 </style>

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

justify-content:

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<style>
        .box {
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            background-color: rgb(213, 110, 110);
            display: flex;
            flex-direction:row; 
            flex-wrap: wrap;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            justify-content: space-around;
        }
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }
    </style>

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

flex-grow属性

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

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 <style>
        .box {
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            background-color: rgb(213, 110, 110);
            display: flex;
            flex-direction:row; 
            justify-content: space-around;
            align-items: stretch;
            
        }
        .box div:nth-child(1){
            flex-grow: 1;
        }
        .box div:nth-child(2){
            flex-grow: 2; 
        }
        .box div:nth-child(3){
            flex-grow: 3;
        }
        div {
            height: 50px;
            background-color: aqua;
            border: 2px solid rgb(0, 0, 0);
        }
    </style>

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

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://www.w3school.com.cn/css/css3_flexbox.asp