超详细！！最好用弹性布局flex之运用！

最新推荐文章于 2025-04-10 23:09:07 发布
最新推荐文章于 2025-04-10 23:09:07 发布
阅读量298 收藏 2
点赞数 7
文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_54345600/article/details/118058432
版权

一、flex布局是什么？

  1. flex-direction 属性
  2. flex-wrap 属性
  3. justify-content 属性
  4. align-items 属性
  5. align-content 属性
  6. align-self 属性
  7. order 属性

Flex 布局是 Flexible Box 的缩写，意味着“弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

-- CSS部分
.demo {
	display:flex;
}

-- HTML部分
<div class="demo"></div>

行内元素也能设置 Flex 布局。


-- CSS部分
.demo {
	display:inline-flex;
}

-- HTML部分
<span class="demo"></span>

容器的设置

flex-direction 属性决定主轴方向。
主要有4个值：
row: 从左到右（默认）
column: 从上到下
row-reverse: 从右到左
column-reverse: 从下到上

-- CSS部分
.demo {
    display: flex;
    flex-direction:row;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

// 为了更好的观赏加上了margin-left值为20
.demo .son:nth-child(n + 2) {
    margin-left: 20px;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    flex-direction:column;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

.demo .son:nth-child(n + 2) {
    margin-top: 20px;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    flex-direction:row-reverse;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

.demo .son:nth-child(n + 2) {
    margin-left: 20px;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    flex-direction:column-reverse;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

.demo .son:nth-child(n + 2) {
    margin-bottom: 20px;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

flex-wrap属性决定着是否换行
主要有3个值：
wrap：换行。
nowrap：不换行。
wrap-reverse：换行，第一行在下面。

-- CSS部分
.demo {
    display: flex;
    flex-direction: row;
    /* 一旦子元素宽度超过父元素盒子就立马会换行 */
    flex-wrap: wrap;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    flex-direction: row;
    /* 一旦子元素宽度超过父元素盒子就立马会换行 */
    flex-wrap: nowrap;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    flex-direction: row;
    /* 一旦子元素宽度超过父元素盒子就立马会换行 */
    flex-wrap: wrap-reverse;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

justify-content属性用来设置主轴位置
主要有5个值：
flex-start（默认）主轴的从左到右
flex-end 主轴的从右到左
center 主轴的中心
space-around 平均分布，两边有空隙
space-between 平均分布，两边没有空隙

-- CSS部分
.demo {
    display: flex;
    justify-content:flex-start;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:flex-end;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:center;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-around;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

align-items 属性用来设置侧轴的位置
主要有4个值：
flex-start：向侧轴的起点对齐
flex-end：向侧轴的终点对齐
center：向侧轴的中心点对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-items:flex-start;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-items:flex-end;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-items:stretch;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    /* height: 100px; */
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-items:center;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
主要6种属性：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:flex-start;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:flex-end;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:center;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:space-around;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content:space-between;
    align-content:stretch;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    /* height: 100px; */
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

在这里插入图片描述

空间分布：flex：number

-- CSS部分
.demo {
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    flex: 1;
    height: 100px;
    text-align: center;
    background: skyblue;
}

-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    flex: 1;
    height: 100px;
    text-align: center;
    background: skyblue;
}

.demo .son:nth-child(2) {
    flex: 2;
    background: red;
}
-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

align-self 属性用来设置在子元素身上的随意改变位置。
主要有3个值：
flex-start：侧轴的向顶部对齐
flex-end：侧轴的向底部对齐
center：侧轴向中心对齐

-- CSS部分
.demo {
   display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    text-align: center;
    background: skyblue;
}

.demo .son:nth-child(2) {
    align-self: center;
}

-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
   display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    text-align: center;
    background: skyblue;
}

.demo .son:nth-child(2) {
    align-self: flex-start;
}

-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

-- CSS部分
.demo {
   display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    text-align: center;
    background: skyblue;
}

.demo .son:nth-child(2) {
    align-self: flex-end;
}

-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

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

-- CSS部分
.demo {
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 400px;
    background: pink;
}

.demo .son {
    width: 100px;
    height: 100px;
    text-align: center;
    background: skyblue;
}

.demo .son:nth-child(1) {
    order: 1;
}

.demo .son:nth-child(2) {
    order: 3;
}

.demo .son:nth-child(3) {
    order: 2;
}

-- HTML部分
<div class="demo">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

在这里插入图片描述

flex弹性布局
shanglinzzh的博客
09-06 257
<style type="text/css"> *{ margin: 0;padding: 0; } ul{ list-style: none; width: 500px; height: 400px; background: #aaa; display: flex; } ul li{ width: 100px; height: 100px; background: #fc5531; color: #fff; } </st
前端面试题（超详细，代码+注释，用了都说好！）
老高的博客
07-01 1148
前端面试题（超详细，代码+注释，用了都说好！）
弹性布局
ly_521_xsy
08-09 194
CSS常用属性 弹性布局 display:flex; 弹性布局改变容器内部的布局方式：从流式布局 —> flex布局 主轴：默认为盒子水平方向，可以通过属性改变主轴方向。 交叉轴：与主轴垂直的即是交叉轴。 属性 flex-direction：容器内项目的排列方向(默认横向排列)　 常用取值：　 row ： 水平排列（左 —> 右） 　 　　 　　　row-reverse：水平排...
css中的flex布局（弹性布局），代码 + 图片展示，详细的不得了，让你轻松掌握
最新发布
2402_84327094的博客
04-10 1529
flex布局也称为弹性布局，顾名思义，他会随着客户端不同设备的屏幕大小自动伸展或收缩盒子， flex布局是一种一维布局模型，因为一个flex盒子一次只能处理一行或一列的元素布局，grid布局才是二维布局，可以同时处理行和列上的布局。 flex布局默认不会换行，意思是在一个维度中他的子盒子溢出后，会将子盒子进行压缩，实在压缩不了的就溢出屏幕了；设置自动换行后，新的行就相当于一个新的flex盒子。
弹性布局 flex
Dark_programmer的博客
03-29 406
1、flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。 弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex; 属性，便可以实现其子元素在父元素中的弹性布局。 但要注意的是 display:fle...
弹性布局flex
玉帛逸的博客
07-25 465
由于兼容性问题，flex布局目前为止，本人基本还只是使用在移动端。使用过它的攻城狮都是对它爱不释手，现在对于没有使用过的人简单讲解下： 布局的传统解决方案，基于盒状模型，大多使用 position定位布局 + float浮动布局。当然，这些都可以解决我们的问题，但是，在有些情况下却不是最简单的方式，例如，如微信下的导航栏，使用flex布局在效率上无疑快很多；1.任何一个容器都可以指定为 Flex
弹性布局制作的简单百度网页
06-30
1. **容器属性**：`display: flex`或`display: inline-flex`用于开启一个弹性布局容器。容器的主要属性有： - `flex-direction`：决定主轴的方向，可设置为`row`（默认，水平方向）、`row-reverse`、`column`（垂直...
19年录制HTML5CSS3视频教程前端开发教程flex布局项目实战
06-14
Flex布局，又称弹性盒布局，是CSS3中的一个关键特性，它为复杂网页设计提供了更为灵活的盒模型，使得在不同屏幕尺寸下的响应式设计变得简单易行。 HTML5是超文本标记语言的第五次重大修订，新增了许多功能，例如...
【移动端适配高级技巧】：媒体查询与视口单位的巧妙运用！
!... # 摘要 随着智能手机和平板电脑的普及，移动端适配技术成为网站开发的关键部分，以提供优质的用户体验。...文章还讨论了触控优化和滑动性能的提升，以及使用现代化前端技术如Flexbox和CSS Grid进行布
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
GAARA
01-13 1545
文章目录 一.准备 1.目标 2.小程序中的flex布局 回顾flex布局 小程序中要把div换成view标签,别的不变 二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽 小程序中的swiper 2.初始化app.json中的data 3.首页的制作 3.1.把首页简历的封面布局居中 3.2.加上简历中英文名以及CSS编写 3.3.加上气泡 3.4.补上个人介绍 三.箭头区域的制作 0.箭头区域图标 1.基本资料 2.主要技能 3.教育经历
弹性布局（Flex）
01-12 4460
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。图1主轴为水平方向的Flex容器示意图。
弹性布局（flex布局）
Miziguo的博客
12-27 9638
—弹性布局的基本使用— 今天我们将来认识一下弹性布局的基本使用方法。 首先我们简单的认识一下弹性布局： display：flex； flex-direction：__；（空白处添加属性） 弹性布局的使用需要由父元素和其子元素同时组成—— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style t
flex布局
li_chun_can的博客
08-19 221
定义 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 模型 模型定义： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。特点：1. 每个弹性容器都有两根轴：主轴和交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值