【不一样的CSS】一文掌握 Flex 布局(长篇警告)

最新推荐文章于 2025-04-27 08:00:00 发布

一碗周.

最新推荐文章于 2025-04-27 08:00:00 发布

阅读量600

点赞数 1

分类专栏：不一样的CSS 文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_46163658/article/details/122005437

版权

写在前面

对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。

最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。

该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)

文章概述

由于篇幅较长(请谨慎阅读)，下图涵盖了本篇文章的主要知识点

正文开始

弹性盒子模型是什么

CSS3新增了弹性盒子模型( Flexible Box或FlexBox)，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。

弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。

弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。

弹性盒子模型相关概念

CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。

弹性盒子模型图解.png (1233×432) (wangshmily.top)

伸缩容器(flex container) :包裹伸缩项目的父元素。
伸缩项目(flex item) :伸缩容器的每个子元素。
轴(axis) :每个弹性盒子模型拥有两个轴。
- 主轴(main axis) :伸缩项目沿其一次排列的轴被称为主轴。
- 侧轴(cross axis) :垂直于主轴的轴被称为侧轴。
- 方向(direction) :伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
尺寸(dimension) :根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
- 对应主轴的称为主轴尺寸。
- 对应侧轴的称为侧轴尺寸。

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话，需要通过 display 样式属性设置值为 flex 或 inline-flex 即可。

display: fiex; /* 值 flex 使弹性容器成为块级元素。 */
/* 或者 */
display: inline-fiex; /* 值 inline-flex 使弹性容器成为单个不可分的行内级元素。 */

以上代码就可以指定某个元素为弹性盒子模型，该元素成为伸缩容器，子元素则成为伸缩项目。

弹性盒子模型也存在浏览器兼容问题，解决方案如下：

/* WebKit引擎的浏览器(Chrome, Safari, Opera) */
display: -webkit-fiex;
/* Trident引擎的浏览器(IE 10+) */
dispaly: -ms-fiex;
/* Gecko引擎的浏览器(Firefox) */
display: -moz-fiex;
/* Presto引擎的浏览器(Opera) */
dispaly: -o-fiex;

示例代码如下：定义一个简单的 Flex Box

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>定义弹性盒子模型</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            /* 
                将父级元素设置为弹性盒子模型
                * 这样设置的话子级所有元素都为弹性盒子模型
                * 默认情况下，所有子元素作为伸缩项目都是沿着主轴水平排列
            */
            .container {
     
                display: flex;
            }
        </style>
    </head>

    <body>
        <!-- HTML 结构为父子级结构 -->
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

这里并没有开启浮动之类的关于布局的样式，仅仅将 .container 的 display 设置为 flex

执行结果如下所示；

默认情况下，所有子元素作为伸缩项目都是沿着主轴水平排列

伸缩容器的属性

flex-direction 属性

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

语法结构

flex-direction: row | row-reverse | column | column-reverse;

值

row：默认值，flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同(起点在左端)。
row-reverse：表现和 row 相同，但是置换了主轴起点和主轴终点(起点在右端)
column： flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同(起点在上沿)
column-reverse：表现和 column 相同，但是置换了主轴起点和主轴终点明(起点在下沿)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>02 flex-direction属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            body {
     
                display: flex;
            }
            .container {
     
                display: flex;
                margin: 20px;
            }
            /* 
                flex-direction 属性
                * 作用：创建主轴方向
                * 适用于伸缩容器元素
                * 值
                    * row: 设置主轴是水平方向 默认
                    * row-reverse: 与 row 的方向相反
                    * column：设置主轴的方向是垂直方向
                    * column-reverse: 与column 方向相反
            */
            .row {
     
                /* 默认，水平排列 */
                flex-direction: row;
                height: 200px;
            }
            .row-reverse {
     
                /* 水平排列，反向 */
                flex-direction: row-reverse;
                height: 200px;
            }
            .column {
     
                /* 垂直排列 */
                flex-direction: column;
            }
            .column-reverse {
     
                /* 垂直排列 反向 */
                flex-direction: column-reverse;
            }
        </style>
    </head>
    <body>
        <div class="container row">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container row-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
        <div class="container column-reverse">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
        </div>
    </body>
</html>

执行效果如下

justify-content 属性

CSS justify-content 属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。

语法结构

justify-content: center| flex-start| flex-end| space-between| space-around;

值

center: 伸缩项目向第一行的中间位置对齐(居中)。
flex-start: 伸缩项目向第一行的开始位置对齐(左对齐)。
flex-end: 伸缩项目向第一行的结束位置对齐(右对齐)。
space-between: 伸缩项目会平均分布在一行中(两端对齐，项目之间的间隔都相等)。
space-around: 伸缩项目会平均分布在一行中(两端对齐，项目两侧的间隔相等)。

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

最低0.47元/天解锁文章