初识Flex（弹性布局）持续更新中...

最新推荐文章于 2025-05-26 01:15:59 发布

置顶 Brain_Destroyer

最新推荐文章于 2025-05-26 01:15:59 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

文章标签： css flex

本文链接：https://blog.youkuaiyun.com/Brain_Destroyer/article/details/111466174

本文介绍了Flex布局的基本原理和使用，包括父项属性如flex-direction、justify-content、align-items等，以及子项属性如flex。通过这些属性，可以灵活控制子元素在主轴和侧轴上的排列方式。

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

flex（弹性布局）

布局原理
弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们把父级设为flex布局以后，子元素的flot、clear和vertical-align属性都将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局原理</title>
    <style>
        /* 父容器 */
        
        div {
            display: flex;
        }
        /* 子元素项目 */
        
        span {}
    </style>
</head>

<body>
    <div>
        <span>弹</span>
        <span>性</span>
        <span>布</span>
        <span>局</span>
    </div>
</body>

</html>

div，就是flex父容器。
span，就是子容器flex项目。
子容器可以横向排列也可以纵向排列

总结Flex布局的原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

1.常见的父项属性

以下6个属性是对父亲元素设置的

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
justify-content：设置主轴上的子元素排列方式
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）

flex-direction设置主轴的方向（重点）

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是 X 轴方向，水平向右
默认侧轴方向就是 Y 轴方向，水平向下

2.属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

在这里插入图片描述

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 给父容器设置弹性布局 */
            display: flex;
            /* 默认的是主轴是从左到右（X轴），子元素会跟着主轴来进行排列*/
            /* flex-direction: row; */
            /* 让主轴（X轴）反转，从右到左排列 */
            /* flex-direction: row-reverse; */
            /* 让主轴转为（Y轴），从上往下排列 */
            /* flex-direction: column; */
            /* 让主轴转为（Y轴）反转，从下往上排列 */
            /* flex-direction: column-reverse; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

justify-content设置主轴上的子元素排列方式(重要)

justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定号主轴是哪个
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            /* 默认子元素项目靠左对齐 */
            /* justify-content:flex-start */
            /* 子元素项目靠右对齐 */
            /* justify-content: flex-end; */
            /* 子元素项目居中对齐 （常用） */
            /* justify-content: center; */
            /* 子元素项目平均分配剩余的空间 (常用)*/
            /* justify-content: space-around; */
            /* 子元素项目先把第一个元素和最后一个元素贴到父元素的左右两边上，再平均分配剩余的空间 （常用且重要）*/
            /* justify-content: space-between; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

flex-wrap 设置子元素是否换行

默认情况下，子元素项目都排在一条线（轴线）上，flex-wrap属性默认是不换行的，如果一行父容器装不下那么多子元素，会缩小每个子元素的宽度直到能一行装下为止。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            /* 默认不换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            /* flex-wrap: wrap; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

align-items设置侧轴子元素排列（单行&重要）

该属性是控制子项在侧轴(默认是y轴)上的排列方式，在子项为单项的时候使用。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-items设置侧轴子元素排列</title>
    <style>
        /* 实现父元素中子元素居中效果 */
        
        div {
            /* 给父容器设置弹性布局 */
            display: flex;
            /* 主轴（X轴）水平居中 */
            justify-content: center;
            /* 侧轴（y轴）垂直居中 */
            align-items: center;
            /* 默认的侧轴（y轴）靠上对齐 */
            /* align-items: flex-start; */
            /* 侧轴（y轴）靠下对齐 */
            /* align-items: flex-end; */
            /* 侧轴拉伸使得子元素高度等同父级（次要）*/
            /* align-items: stretch; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            /* 使用align-items: stretch拉伸时子元素不能设置高度否则该属性无效 */
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

align-content设置侧轴上的子元素排列方式（多行&重要）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
在这里插入图片描述

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content设置侧轴上的子元素的排列方式（多行）</title>
    <style>
        div {
            display: flex;
            /* 需要先换行完成多行效果 */
            flex-wrap: wrap;
            /* 多行侧轴顶部对齐 */
            /* align-content: flex-start; */
            /* 多行底部对齐 */
            /* align-content: flex-end; */
            /* 多行侧轴平均分配多余的空间 */
            /* align-content: space-around; */
            /* 多行侧轴的第一个和最后一个子项分别移动到顶端和底部，再平均分配多余的空间给剩下的子元素 */
            /* align-content: space-between; */
            /* 多行侧轴居中显示 */
            /* align-content: center; */
            /* 多行侧轴子项的高度平分父元素高度 */
            /* align-content: stretch; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            /* 设置align-content: stretch时不能设置高度 */
            /* height: 200px; */
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>

</html>

flex-flow复合属性

该属性是定义主轴方向与子项是否换行的一种复合写法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            /* 复合属性：主轴方向+是否换行 */
            flex-flow: column wrap;
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>

</html>

2.flex布局子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属于定义子项的排列顺序（前后顺序）

flex属性（重要）

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
在这里插入图片描述

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            /* 设置为弹性盒子 */
            display: flex;
            /* 第一个子项和最后一个子项靠左右对齐,平分剩余的空间 */
            justify-content: space-between;
            width: 800px;
            height: 150px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            background-color: #b15bff;
        }
        
        section div:nth-child(2) {
            /* 子项分配剩余空间等份 */
            flex: 1;
            background-color: blue;
        }
        
        section div:nth-child(3) {
            width: 100px;
            background-color: #b15bff;
        }
        
        p {
            /* 设置为弹性盒子 */
            display: flex;
            width: 800px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
        
        p span {
            /* 每个子项占剩余空间的等分 */
            flex: 1;
        }
        
        p span:nth-child(1) {
            background-color: #c4573a;
        }
        
        p span:nth-child(2) {
            background-color: yellow;
        }
        
        p span:nth-child(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>