Flexbox弹性盒子详解

TechFrontRunner

于 2024-10-11 08:32:11 发布

阅读量638

点赞数 30

文章标签： css3 前端

本文链接：https://blog.csdn.net/qq_63447955/article/details/142826391

版权

Flex弹性盒子模型详解

在网页布局中，传统的CSS布局方式，如div+css布局，主要依赖盒子模型，通过position、float、display等方式实现。然而，这些方式对于某些特殊布局，如垂直居中布局，却难以达到理想效果。为了解决这一问题，W3C于2009年提出了一种新的布局方案——Flex布局（Flexible Box，简称flexbox）。Flex布局的出现，提供了一种更加简便、完整且响应式的页面布局方式。

Flex布局的基本概念

Flex布局的核心是弹性容器（Flex container）和弹性子元素（Flex item）。弹性容器通过设置display属性的值为flex或inline-flex来定义。弹性容器内包含了一个或多个弹性子元素，这些子元素自动成为容器成员，其布局将受到容器属性的控制。

弹性容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局的常见属性及用法

1. 主轴方向

属性名：flex-direction

row（默认值）：主轴为水平方向，从左到右排列。
row-reverse：主轴为水平方向，从右到左排列。
column：主轴为垂直方向，从上到下排列。
column-reverse：主轴为垂直方向，从下到上排列。

flex-direction: row;

在这里插入图片描述

flex-direction: row-reverse;

在这里插入图片描述

flex-direction: column;

在这里插入图片描述

flex-direction: column-reverse;

在这里插入图片描述
方块之间的空隙是设置了margin：10px;忘记改掉了，不影响效果

2. 主轴换行方式

属性名：flex-wrap

nowrap（默认值）：不换行，所有项目在同一行显示，可能导致项目被压缩。
wrap：正常换行，第一行在最上面。
wrap-reverse：反向换行，第一行在最下面。

flex-wrap: nowrap;

在这里插入图片描述

flex-wrap: wrap;

在这里插入图片描述

flex-wrap: wrap-reverse;

在这里插入图片描述

3. flex-flow（分开写更好）

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要
求。
flex-flow: row wrap;

4. 主轴对齐方式

属性名：justify-content

flex-start：项目沿主轴左对齐。
flex-end：项目沿主轴右对齐。
center：项目沿主轴居中对齐。
space-between：项目之间的间隔相等，首尾项目与容器边缘紧贴。
space-around：每个项目两侧的间隔相等，首尾项目与容器边缘有一定距离。
space-evenly：均匀排列每个元素，所有间隔相等。

justify-content: flex-start;

在这里插入图片描述

justify-content: flex-end;

在这里插入图片描述

justify-content: center;

在这里插入图片描述

justify-content: space-between;

在这里插入图片描述

justify-content: space-around;

在这里插入图片描述

justify-content: space-evenly;

在这里插入图片描述

5. 侧轴对齐方式

5.1 一行的情况

属性名：align-items

flex-start：项目沿交叉轴起点对齐。
flex-end：项目沿交叉轴终点对齐。
center：项目沿交叉轴居中对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items: flex-start;

在这里插入图片描述

align-items: flex-end;

在这里插入图片描述

align-items: center;

在这里插入图片描述

align-items: baseline;

在这里插入图片描述

align-items: stretch;

在这里插入图片描述

5.2 多行的情况

属性名：align-content

flex-start ：与侧轴的起点对齐。
flex-end ：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between ：与侧轴两端对齐，中间平均分布。
space-around ：伸缩项目间的距离相等，比距边缘大一倍。
space-evenly : 在侧轴上完全平分。
stretch ：占满整个侧轴。—— 默认值

align-content: flex-start;

在这里插入图片描述

align-content: flex-end;

在这里插入图片描述

align-content: center;

在这里插入图片描述

align-content: space-between;

在这里插入图片描述

align-content: space-around;

在这里插入图片描述

align-content: space-evenly;

在这里插入图片描述

align-content: stretch;

在这里插入图片描述

6. 伸缩性

6.1 flex-basis

概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。

备注：主轴横向：宽度失效；主轴纵向：高度失效.

作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目
的宽或高。

6.2 flex-grow（伸）

概念： flex-grow 定义伸缩项目的放大比例，默认为0 ，即：纵使主轴存在剩余空间，也不拉伸
（放大）。
规则：

若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、
3/6 的空间。

6.3 flex-shrink（缩）

概念：flex-shrink定义了项目的压缩比例，默认为1 ，即：如果空间不足，该项目将会缩小。
收缩项目的计算，略微复杂一点，我们拿一个场景举例：

三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别
为： 1 、 2 、 3
若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px
所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
1. 计算分母： (200×1) + (300×2) + (200×3) = 1400
2. 计算比例：
项目一： (200×1) / 1400 = 比例值1
项目二： (300×2) / 1400 = 比例值2
项目三： (200×3) / 1400 = 比例值3
3. 计算最终收缩大小：
项目一需要收缩：比例值1 × 300
项目二需要收缩：比例值2 × 300
项目三需要收缩：比例值3 × 300

7. flex复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为0 1 auto 。

如果写 flex:1 1 auto ，则可简写为：flex:auto
如果写 flex:1 1 0 ，则可简写为： flex:1
如果写 flex:0 0 auto ，则可简写为： flex:none
如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。

8. 项目排序

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

设置
盒子2：order：-1;
盒子3：order：1;
效果如图
在这里插入图片描述

9. 单独对齐（几乎不用）

通过 align-self属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto ，表示继承父元素的 align-items 属性。

代码案例

案例一：子元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素相对父元素居中</title>
    <style>
        html, * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .son {
            width: 300px;
            height: 300px;
            background-color: #9DB783;
            flex: 0 1 auto;
        }
    </style>
</head>
<body>
    <div class="son"></div>
</body>
</html>

案例二：自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        html, * {
            margin: 0;
            padding: 0;
        }
        .parent {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .son {
            flex: 0 1 300px;
            background-color: #fdf6e3;
            min-height: 200px;
            box-sizing: border-box;
            border: 3px solid #9DB783;
            padding: 20px;
            margin: 20px;
        }
        .title {
            font-size: 20px;
            color: #c03035;
        }
        .content {
            font-size: 15px;
            color: #323232;
        }
    </style>
</head>
<body>
    <section class="parent">
        <article class="son">
            <span class="title">将进酒</span><br>
            <span class="content">君不见，黄河之水天上来，奔流到海不复回，君不见，高堂明镜悲白发，朝如青丝暮成雪</span>
        </article>
        <!-- 省略其他文章标签 -->
    </section>
</body>
</html>