传统的布局方案大多采用div+css+float+position+display来实现，但是随着css3中弹性盒子模型的推出，在前端布局方案中就又多出了一项彪悍的选项。
而因为最近在研究小程序，发现中间使用弹性盒子布局效果更好效率更高一点，所以就将之前学习弹性盒模型的相关知识点整理出来，给大家分享。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称为弹性布局，是css3中新提出的一种布局方式，通过弹性布局，可以让子元素自动调整宽度和高度，从而达到很好的填充任何不同屏幕大小的显示设备的显示空间。
弹性盒模型与之前的布局方式是完全不同的两种，虽然依然采用div+css的方式，但是却将之前使用的浮动给替换成了弹性布局。从而使页面元素布局方式更加的简单。
不同于我们后面所学习的网格系统，弹性布局更加适用于应用组件以及小比例布局。
在之前,flex经历了三次迭代，每一次迭代都产生了不同的语法，目前我们学习遵循最终版本的语法。因为之前版本在使用的时候需要考虑兼容问题，而最新版本，所有的浏览器都支持无前缀的终极规范。

弹性盒子模型认知

flex布局方式是一个完整的布局模块，而不是只某个属性。flex的布局主要依靠父容器和元素组成。
父容器称之为flex container(flex容器) 而其子元素称之为flex item(flex元素)。
而整个flex布局的核心在于对其方式、排布和顺序。

弹性盒子模型的使用

想要使用flex布局，首先要使用display:flex 或者 display:inline-flex来设置父容器。
display:flex 给父元素设置完成后，那么整个父元素会变成弹性容器，但是是一个块级元素。
display:inline-flex给父元素设置完成后，那么整个父元素会变成弹性容器，但是是一个行内块级元素，有些类似于inline-block的效果。

当父容器设置了这个属性之后，里面的子元素默认的全部变成flex item (flex元素)
Tip:flex布局与我们之前所学习的布局方式是属于另外一套布局方案，所以在使用了flex布局之后，如Block”，“inline”，“float” 和 “text-align” 等一些属性会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

登录后复制

执行的效果如下：

弹性盒模型 flex box的认知与使用

必备名词解释

在使用弹性盒子模型之前，需要了解一些弹性盒模型的基础概念名词。

main axis 主轴
cross axis 交叉轴/侧轴与主轴垂直
main start 主轴起点边
main end 主轴终点边
cross start 交叉轴起点边
cross end 交叉轴终点边

弹性盒模型 flex box的认知与使用

为什么使用弹性盒子模型

弹性盒子模型在开发手机端的时候使用频率较高，在微信小程序开发的时候也是使用频率非常高的技术，可以通过几个实例来看一下弹性盒子的好处：

实例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

登录后复制

代码结果如下：

弹性盒模型 flex box的认知与使用

在上述实例中需要注意的点：
① 启用flex布局 display:flex
② 父元素的子元素在父元素设置了display:flex之后，子元素会自动的变为弹性盒子的子元素，
被称为flex items
③ 默认情况，所有的 flex-item 会按照 flex 容器的顶部和左侧对齐。

实例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

登录后复制

代码效果如下：

弹性盒模型 flex box的认知与使用

我们可以通过非常简单的属性设置来调整对其方式，例如：
justify-content: flex-start / flex-end /center /space-between /space-around
我们也可以通过align-items:center 属性让 items 在垂直方向居中。

实例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*让正方形显示在第一位而不是中间*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

登录后复制

实例3 和实例2 大体相似，但是在.square类里存在一句order:-1，可以更改元素的渲染顺序。这个是弹性盒模型中一个非常厉害的一个方面。

实例3代码效果如下：

弹性盒模型 flex box的认知与使用

flex布局方式属性

在flex整个体系当中，大体上可以分为两类，一类是给父容器设置的属性，一类是给父容器中子元素设置的属性。

弹性容器属性 -- 给父元素设置的属性

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

语法：

row | row-reverse | column | column-reverse
row 默认值，子元素会排列在一行从主轴左侧开始
row-reverse 子元素会排列在一行。不过是从右侧开始
column 子元素垂直显示，从侧轴起始点开始
column-reverse 垂直显示，不过从结束点开始

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

登录后复制

2.flex-wrap 控制容器内的子元素是被强制放在一行中或者是被放在多个行上。如果允许换行，这个属性允许你控制行的堆叠方向。

语法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被摆在一行默认值
wrap 当一行元素过多，则允许元素换行
wrap-reverse 将侧轴起点和终点颠倒

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

登录后复制

3.justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间。

语法：
flex-start | flex-end | center | space-between | space-around
flex-start : 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。默认
flex-end : 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
center : 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

实例代码:

参考上面的实例2.

4.align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。

语法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴起点
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸元素以适应默认值

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*启用flex布局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*与基准线对齐*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

登录后复制

5.align-content 多行对其方式，如果只有一行，则失效。

语法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 与交叉轴的起点对其
flex-end : 与交叉轴的终点对其
center : 与交叉轴的中点对其
space-between : 与交叉轴两端对其，轴线之间的间隔平均分布
space-around: 所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
stretch ：拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            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; /*默认*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

登录后复制

弹性元素属性 -- 给子元素设置的属性

order order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。

语法：
order:

align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式

语法：
stretch|center|flex-start|flex-end|baseline

flex-grow 定义弹性盒子元素扩展比率
flex-shrink 定义弹性盒子元素的收缩比率
flex-basis 指定了flex item在主轴方向上的初始大小。如果不使用box-sizing来
改变盒模型的话，那么这个属性就决定了flex item的内容盒content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三个属性最好相互搭配使用。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

登录后复制

ok，上面大概就是一些常用的弹性盒子模型flex-box常用的属性，上面的实例很多只是给了代码，没有给效果图，是因为希望正在学习弹性盒子模型的同志们最好把代码实际的敲一下，并且亲自尝试不同的属性值，来分析不同属性带来的不同的效果。
弹性盒子模型难度不大，但是却与传统的布局方案有很大的差别。

以上是弹性盒模型 flex box的认知与使用的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7533

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

全球最强开源 MoE 模型来了，中文能力比肩 GPT-4，价格仅为 GPT-4-Turbo 的近百分之一 May 07, 2024 pm 04:13 PM

想象一下，一个人工智能模型，不仅拥有超越传统计算的能力，还能以更低的成本实现更高效的性能。这不是科幻，DeepSeek-V2[1]，全球最强开源MoE模型来了。DeepSeek-V2是一个强大的专家混合（MoE）语言模型，具有训练经济、推理高效的特点。它由236B个参数组成，其中21B个参数用于激活每个标记。与DeepSeek67B相比，DeepSeek-V2性能更强，同时节省了42.5%的训练成本，减少了93.3%的KV缓存，最大生成吞吐量提高到5.76倍。DeepSeek是一家探索通用人工智

AI颠覆数学研究！菲尔兹奖得主、华裔数学家领衔11篇顶刊论文｜陶哲轩转赞 Apr 09, 2024 am 11:52 AM

AI，的确正在改变数学。最近，一直十分关注这个议题的陶哲轩，转发了最近一期的《美国数学学会通报》（BulletinoftheAmericanMathematicalSociety）。围绕「机器会改变数学吗？」这个话题，众多数学家发表了自己的观点，全程火花四射，内容硬核，精彩纷呈。作者阵容强大，包括菲尔兹奖得主AkshayVenkatesh、华裔数学家郑乐隽、纽大计算机科学家ErnestDavis等多位业界知名学者。AI的世界已经发生了天翻地覆的变化，要知道，其中很多文章是在一年前提交的，而在这一

谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流

你好，电动Atlas！波士顿动力机器人复活，180度诡异动作吓坏马斯克 Apr 18, 2024 pm 07:58 PM

波士顿动力Atlas，正式进入电动机器人时代！昨天，液压Atlas刚刚「含泪」退出历史舞台，今天波士顿动力就宣布：电动Atlas上岗。看来，在商用人形机器人领域，波士顿动力是下定决心要和特斯拉硬刚一把了。新视频放出后，短短十几小时内，就已经有一百多万观看。旧人离去，新角色登场，这是历史的必然。毫无疑问，今年是人形机器人的爆发年。网友锐评：机器人的进步，让今年看起来像人类的开幕式动作、自由度远超人类，但这真不是恐怖片？视频一开始，Atlas平静地躺在地上，看起来应该是仰面朝天。接下来，让人惊掉下巴

替代MLP的KAN，被开源项目扩展到卷积了 Jun 01, 2024 pm 10:03 PM

本月初，来自MIT等机构的研究者提出了一种非常有潜力的MLP替代方法——KAN。KAN在准确性和可解释性方面表现优于MLP。而且它能以非常少的参数量胜过以更大参数量运行的MLP。比如，作者表示，他们用KAN以更小的网络和更高的自动化程度重现了DeepMind的结果。具体来说，DeepMind的MLP有大约300,000个参数，而KAN只有约200个参数。KAN与MLP一样具有强大的数学基础，MLP基于通用逼近定理，而KAN基于Kolmogorov-Arnold表示定理。如下图所示，KAN在边上具

特斯拉机器人进厂打工，马斯克：手的自由度今年将达到22个！ May 06, 2024 pm 04:13 PM

特斯拉机器人Optimus最新视频出炉，已经可以在厂子里打工了。正常速度下，它分拣电池（特斯拉的4680电池）是这样的：官方还放出了20倍速下的样子——在小小的“工位”上，拣啊拣啊拣：这次放出的视频亮点之一在于Optimus在厂子里完成这项工作，是完全自主的，全程没有人为的干预。并且在Optimus的视角之下，它还可以把放歪了的电池重新捡起来放置，主打一个自动纠错：对于Optimus的手，英伟达科学家JimFan给出了高度的评价：Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉

FisheyeDetNet：首个基于鱼眼相机的目标检测算法 Apr 26, 2024 am 11:37 AM

目标检测在自动驾驶系统当中是一个比较成熟的问题，其中行人检测是最早得以部署算法之一。在多数论文当中已经进行了非常全面的研究。然而，利用鱼眼相机进行环视的距离感知相对来说研究较少。由于径向畸变大，标准的边界框表示在鱼眼相机当中很难实施。为了缓解上述描述，我们探索了扩展边界框、椭圆、通用多边形设计为极坐标/角度表示，并定义一个实例分割mIOU度量来分析这些表示。所提出的具有多边形形状的模型fisheyeDetNet优于其他模型，并同时在用于自动驾驶的Valeo鱼眼相机数据集上实现了49.5%的mAP

DualBEV：大幅超越BEVFormer、BEVDet4D，开卷！ Mar 21, 2024 pm 05:21 PM

这篇论文探讨了在自动驾驶中，从不同视角（如透视图和鸟瞰图）准确检测物体的问题，特别是如何有效地从透视图（PV）到鸟瞰图（BEV）空间转换特征，这一转换是通过视觉转换（VT）模块实施的。现有的方法大致分为两种策略：2D到3D和3D到2D转换。2D到3D的方法通过预测深度概率来提升密集的2D特征，但深度预测的固有不确定性，尤其是在远处区域，可能会引入不准确性。而3D到2D的方法通常使用3D查询来采样2D特征，并通过Transformer学习3D和2D特征之间对应关系的注意力权重，这增加了计算和部署的

See all articles

弹性盒模型 flex box的认知与使用

弹性盒子模型

布局方案

弹性盒模型flex布局介绍

弹性盒子模型认知

弹性盒子模型的使用

必备名词解释

为什么使用弹性盒子模型

flex布局方式属性

弹性容器属性 -- 给父元素设置的属性

弹性元素属性 -- 给子元素设置的属性

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题