最流行的布局方案 Flex 弹性盒布局详解

最新推荐文章于 2024-06-20 08:13:15 发布
最新推荐文章于 2024-06-20 08:13:15 发布
阅读量2.4k 收藏 9
点赞数 1
分类专栏： crmeb 学习笔记 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39221436/article/details/127055153
版权

Flex布局又称弹性盒布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。

弹性盒布局简介

  • 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
  • 弹性容器通过设置 display 属性的值为flex 或 inline-flex将其定义为弹性容器，不遵循标准文档流的显示方式。
  • 弹性容器外以及弹性子元素内部仍遵循标准文档流，弹性盒布局只是定义了弹性子元素在弹性容器内部的布局方式。
  • 弹性容器添加display: flex属性显示为块级元素，添加display: inline-flex显示为行级元素。
  • 设为弹性盒布局以后弹性子元素的float、clear和vertical-align属性将失效，但position属性，依然生效。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 150px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third">third</div>
		<div id="forth">forth</div>
	</div>
</body>

页面效果：
在这里插入图片描述

如上图所示，弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。

父容器的六大属性

了解两个基本方向，这个牵扯到弹性布局的使用：

主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
交叉轴： 与主轴垂直的另一方向，称为交叉轴

1、flex-direction属性
决定弹性子元素的排列方向（即定义了主轴方向），可选值：

  • row（默认值）： 主轴为水平方向，起点在左端，子元素从左至右排列；
  • row-reverse： 主轴在水平方向，起点在右端，子元素从右至左排列；
  • column：主轴为垂直方向，起点在上沿，子元素从上向下排列；
  • column-reverse：主轴为垂直方向，起点在下沿，子元素从下向上排列；

2、flex-wrap属性
定义如果一行排列不下如何换行，可选值：

  • nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
  • wrap： 换行，并且第一行在容器最上方；
  • wrap-reverse： 换行，并且第一行在容器最下方；

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
</style>
<body>
 	<div id="container">
  		<div id="first">first</div>
  		<div id="second">second</div>
  		<div id="third">third</div>
  		<div id="forth">forth</div>
  		<div id="five">five</div>
	</div>
</body>

页面效果：
在这里插入图片描述

当把wrap-reverse换成wrap：
在这里插入图片描述

3、flex-flow属性
flex-direction和flex-wrap的缩写形式，默认值为：row wrap，可以将flex-direction的可选值和flex-wrap的可选值进行任意组合，此处不再做过多赘述。
4、justify-content属性
定义了子元素在在主轴上的对齐方式（此属性与flex-direction息息相关，当flex-direction的取值为row时，起点在主轴左边，取值为row-reverse时起点在主轴右边，column起点在主轴上边，column-reverse-起点在主轴下边）

  • flex-start（默认值）： 项目位于主轴起点。
  • flex-end：项目位于主轴终点。
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔，间隔为项目间间隔的一半)

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    justify-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="forth">forth</div>
  	</div>
</body>

在这里插入图片描述

justify-contet属性为flex-end时：

在这里插入图片描述

justify-content属性为center：
在这里插入图片描述

justify-content属性为space-between：
在这里插入图片描述

justify-content属性为space-around：
在这里插入图片描述

5、align-items属性
定义子元素在交叉轴上的对齐方式（flex-direction属性定义主轴方向，与之相垂直的就是交叉轴方向）

  • flex-start：子元素按照交叉轴的起点对齐。
  • flex-end：子元素按照交叉轴的终点对齐。
  • center：子元素按照交叉轴的中点对齐。
  • baseline：子元素按照第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third">third</div>
		<div id="four">four</div>
	</div>
</body>

页面效果：
在这里插入图片描述

align-items属性取flex-end:
在这里插入图片描述

align-items属性取center
在这里插入图片描述

增加第一个子元素的高度和字体大小，align-items属性取baseline
在这里插入图片描述

我们尝试将flex-direction属性修改为column，我们一起来看看会对align-items属性的页面效果产生什么影响：
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
  		<div id="first">first</div>
  		<div id="second">second</div>
  		<div id="third">third</div>
  		<div id="four">four</div>
 	</div>
</body>

页面效果：
在这里插入图片描述

当我们通过flex-direction属性修改主轴方向时交叉轴的方向也随之改变，因此弹性子元素的交叉轴排列方式也随之改变。大家可以自己尝试不同flex-direction取值下align-items属性对于页面布局的影响，此处限于篇幅原因不再一一尝试。
6、align-content属性
修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐，即align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
（可以将其视为多行情形下的align-items属性）

  • flex-start：子元素按照交叉轴的起点对齐。
  • flex-end：子元素按照交叉轴的终点对齐。
  • center：子元素按照交叉轴的中点对齐。
  • space-between：子元素按照交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div>
	</div>
</body>

页面效果：
在这里插入图片描述

align-content属性为flex-end：
在这里插入图片描述

align-content属性为center：
在这里插入图片描述

align-content属性为space-between：
在这里插入图片描述

align-content属性为space-around：
在这里插入图片描述

我们来尝试一下flex-wrap属性取wrap-reverse时会对align-content属性的页面效果产生什么影响
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
 	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div>
 	</div>
</body>

页面效果：
在这里插入图片描述

我们可以看到由于修改了flex-wrap属性，子元素对齐的交叉轴起点也发生了改变，因此此时flex-start从底部开始对齐，大家可以自己尝试一下不同flex-wrap属性下align-content属性页面效果的不同，此处由于篇幅原因不再一一展示。

子容器的六大属性

1、order属性
定义弹性子元素排列顺序
用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
  	<div id="container">
        <div id="first" style="order: 1;">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
	</div>
</body>

页面效果：
在这里插入图片描述

由于第一个子元素的order属性为1，其他都为0，所以first子元素排在最后面，其他的排在前面。
2、flex-grow属性
定义子元素的放大比例。用整数值规定项目将相对于其他灵活的项目进行扩展放大的量。默认值是 0，即如果存在剩余空间子元素也不扩展。
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 480px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
   	<div id="container">
        <div id="first" style="flex-grow: 1;">first</div>
        <div id="second">second</div>
        <div id="third" style="flex-grow: 2;">third</div>
        <div id="four">four</div>
 	</div>
</body>

页面效果：
在这里插入图片描述

如上图所示，实际上first元素的宽度为原本元素宽度 + 剩余空间的宽度 x (1/3); third元素的宽度为原本元素的宽度 + 剩余空间的宽度 x (2/3)。
3、flex-shrink属性
定义了子元素的缩小比例。整数值规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1，即如果空间不足，该子元素将缩小。如果值为0，则该子元素不挤压宽度，如果所有子元素的flex-shirnk属性全为0，当宽度不够时部分子元素将挤出父容器。如果值越大，则该子元素收缩的量越大。
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 300px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
    <div id="container">
        <div id="first" style="flex-shrink: 1;">first</div>
        <div id="second" style="flex-shrink: 0;">second</div>
        <div id="third" style="flex-shrink: 2;">third</div>
        <div id="four" style="flex-shrink: 0;">four</div>
  </div>
</body>

页面效果：
在这里插入图片描述

如上图所示：
second元素和forth元素的宽度都没有收缩，first元素的实际宽度 = first元素的正常宽度 - 不足的空间宽度 x (1/3)；third元素的实际宽度 = third元素的正常宽度 - 不足的空间宽度 x (2/3)
4、flex-basis属性
定义子元素占据的主轴空间，默认值为auto（如果主轴为水平，则设置这个属性类似于子元素宽度，子元素原width属性将失效；如果主轴为垂直，则设置这个属性类似于子元素的高度，子元素原height属性将失效）
可选值：

整数值或百分比，规定子元素占据主轴空间的初始值；
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 360px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
    <div id="container">
        <div id="first" style="flex-basis: 100px">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
    </div>
</body>

页面效果：
在这里插入图片描述

从上图我们可以看出，first元素的实际宽度为100px，覆盖之前定义的width：80px
5、flex属性
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。除了直接分别给flex-grow、flex-shrink 和 flex-basis赋值还可以选取以下值：

  • auto：与 1 1 auto 相同。
  • none：与 0 0 auto 相同。
  • initial：设置该属性为它的默认值，即为 0 1 auto。
  • inherit：从父元素继承该属性。

6、align-self属性
定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。
示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    align-items: flex-start;
    width: 360px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third" style="slign-self: flex-end;">third</div>
		<div id="forth">forth</div>
	</div>
</body>

页面效果：
在这里插入图片描述
完整附件点此下载

CRMEB定制开发
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Flex弹性盒子布局详解
i前端小学生的博客
05-06 428
Flex弹性盒子布局详解 目录 Flex弹性盒子布局详解 1、什么是 flex 布局 2、基本概念 3、容器的属性 4、项目的属性 1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本概念 2.1、什么是 flex 容器（flex container）？ 采用 flex 布局的元素，称为 flex 容器： .box { display: flex | i.
入坑前端：一文搞懂 Flex 布局
qq_60848699的博客
01-28 6147
前言 Flex 这个布局前前后后看了3次，第一次学的时候，发现有十几个属性值没耐心看完就没往下学了，作罢。第二次去看的时候大概搞明了Flex每个属性的用法，可没过几天又全部忘光了。第三次了解 Flex，于是就有了这篇笔记。估计是全网最易懂的Flex布局的文章。 前端布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。Flex 布局可以通过简单的属性灵活实现复杂的响应式布局。 当你会了Flex布局后，几乎所有布局都可以通过Flex解决..
一文看懂flex布局
前端成长之路
04-18 7836
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 flex布局做为前端最为常用的布局方式之一，它的重要性不言而喻，今天我们来分享flex布局的应用； 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib
LVGL开发教程-Flex（弹性布局）
最新发布
xuewenyu_的博客
06-20 684
Flexbox布局在现代界面设计中扮演着重要角色，特别是在响应式和动态布局方面。LVGL（LittlevGL）作为一个轻量级图形库，通过其强大的Flex布局功能，使得用户能够轻松地管理和排列界面元素。本文将介绍如何在LVGL中利用Flexbox来创建灵活且适应性强的界面布局，涵盖了常用的方法、代码实现示例以及对齐方式的详细讨论。Flexbox简称Flex,可以将项目排列成行或列,处理环绕，调整项目和轨道之间的间距，处理grow以使项目填充剩余空间的最小/最大宽度和高度。
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1115
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
flex弹性布局教程-08容器属性flex-wrap
晴空闲云
09-23 1万+
本篇讲解了容器属性 flex-wrap，用于设置容器内项目是否自动换行，并对相应的值进行了演示。 阅读时间大约5~10分钟。
flex布局
EmotionComputer
04-12 1629
(1). 前言 传统的布局方案，基于css盒子模型，float+display+position，TA对于很多特殊布局方案就非常不方便，必须垂直居中, 举例方案1(宽高度已知，ie9+）) <style> .outer{ border: 1px solid red; width: 500px; height: 500px; ...
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
CSS弹性盒模型flex在布局中的应用详解
01-19
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
flex布局的学习
qq_34507902的博客
07-26 727
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 当容器设置为flex布局之后，可以对里面的各个元素采
flex布局（弹性盒、伸缩盒）-详细介绍
qq_48109675的博客
08-30 1422
1、对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性 2、容器属性（定义在父元素中的属性） flex-flow：是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。 flex-direction：用于控制子元素（项目）排列方式和顺序 flex-wrap：用于控制主轴上的元素不换行、换行、反向
flex弹性布局知识点
super码力的博客
11-06 1245
flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
学习笔记1_flex布局的属性
ankh的博客
03-29 1534
一、设置在容器上的属性 1.flex-direction属性 flex-direction属性决定主轴的方向 .box { flex-direction: row | row-reverse | column | column-reverse; } 1)row（默认值）：主轴为水平方向，起点在左端。 2)row-reverse：主轴为水平方向，起点在右端。 3)column：主轴为垂直方向，起点在上。 4)column-reverse：主轴为垂直方向，起点在下。 2.flex-wrap属性 f
【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-06 4220
一、设置子元素是否换行 : flex-wrap 样式说明 1、flex-wrap 样式引入 2、flex-wrap 样式取值说明 二、代码示例 1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行 2、代码示例 : 自动换行
flex布局中使用flex-wrap实现换行
热门推荐
蔡姐的博客
04-04 2万+
使用flex-wrap进行分行布局
flex-wrap容器属性
巧克力很苦的小博客
05-02 1万+
flex-wrap容器属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。 .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 （1）nowrap（默认）：不换...
弹性盒子的布局
jan_ping的博客
02-13 6662
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
CSS Flex弹性布局详解：方向与换行控制
CSS Flex弹性布局详解深入解析 在现代前端开发中，Flex布局（Flexible Box Layout）是一种强大的工具，特别适合用于响应式设计，特别是在移动设备上实现灵活且易于管理的布局。本文将通过一个基础案例来讲解如何...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CRMEB定制开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值