16、弹性布局（flex）

最新推荐文章于 2025-04-10 23:09:07 发布
最新推荐文章于 2025-04-10 23:09:07 发布
阅读量238 收藏 1
点赞数
分类专栏： Web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream_AI/article/details/107143531
版权

弹性布局（flex）

  • 相关概念
  • 容器属性
  • 子元素属性

一、相关概念

1.1、什么是Flex？

​ Flex（Flexible Box）：翻译为弹性布局，用来为盒状模型提供最大的灵活性。
​ 需要注意的是，Flex只有在支持CSS3的情况下才能生效。

1.2、Flex容器和项目

​ 采用Flex布局的元素被称为Flex容器，简称容器。它的所有子元素自动成为容器成员，也被称为项目。

1.3、主轴和交叉轴

​ 容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
​ 子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、容器的属性

<!--以下案例的HTML模板-->
<body>
    <div class="outer">
        <div class="inner" id="div1">1</div>
        <div class="inner" id="div2">2</div>
        <div class="inner" id="div3">3</div>
    </div>
</body>

2.1、flex-direction属性

flex-direction属性决定了主轴的方向，即子元素的排列方向。

  • row（默认值）：主轴为水平方向，起点位于左侧。
  • row-reverse：主轴为水平方向，起点在右侧。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-direction:row;/*主轴为水平方向，起点位于左侧*/
}
.inner{
    width: 30%;
    height: 90%;
    margin-right: 10px;
    background:red;
}

在这里插入图片描述

2.2、flex-wrap属性

flex-wrap属性决定了子元素如何换行。

  • nowrap（默认）：不换行，如果一条轴线排不下则自动调整子元素的宽度，使其可以排下。
  • wrap：换行，第二条轴线位于第一条的左下方。
  • wrap-reverse：换行，第二条轴线位于第一条的左上方。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-wrap:wrap;/*换行，第二条轴线位于第一条的左下方*/
}
.inner{
    width: 140px;
    height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
    background:red;
}

在这里插入图片描述

2.3、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.4、justify-content属性

justify-content属性定义了子元素在主轴上的对齐方式。

  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：左右对齐，子元素之间的间隔都相等。
  • space-around：每个子元素的左右外边距都相等。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    justify-content: center; /*水平居中*/
}
.inner{
    width: 80px;
    height: 90px;
    margin-right: 10px;
    margin-bottom: 10px;
    background:red;
}

在这里插入图片描述

2.5、align-items属性

align-items属性定义子元素在交叉轴上如何对齐。

  • flex-start：上对齐
  • flex-end：下对齐
  • center：居中对齐
  • baseline: 子元素的第一行文字的基线对齐。
  • stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    justify-content: flex-start; /*左对齐*/
	align-items:flex-start;
}
.inner{
    width: 90px;
    margin-right: 10px;
    background:red;
}
#div1{
    height: 40px;
}
#div2{
    height: 70px;
}
#div3{
    height: 50px;
}

在这里插入图片描述

2.6、align-content属性

align-content属性定义了多根主轴线的对齐方式。如果只有一根主轴线，该属性不起作用。

  • flex-start：子元素左上对齐
  • flex-end：子元素左下对齐
  • center：子元素左中对齐
  • space-between：子元素左对齐，多根主轴线等分height。
  • space-around：子元素左对齐，每根主轴线上下的外边距都相等。
  • stretch（默认值）：轴线占满整个交叉轴。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-wrap:wrap;/*允许换行*/
    justify-content: flex-start; /*左对齐*/
    align-content:center;/*左中对齐*/
}
.inner{
    width: 140px;
    height:30px;
    margin-right: 10px;
    background:red;
}

在这里插入图片描述

三、子元素属性

3.1、order属性

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

/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
}
.inner{
    width: 90px;
    height:90px;
    margin-right: 10px;
    background:red;
}
#div1{
    order:1;/*默认为0*/
}
#div3{
    order:3;
}

在这里插入图片描述

3.2、flex-grow属性

flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-grow的数值决定了各个子元素占据剩余空间的比例

3.3、flex-shrink属性

flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-shrink的数值决定了各个子元素在空间不足时缩小的比例

3.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。

3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

4.6 align-self属性

align-self属性允许单个子元素有与其他子元素不一样的垂直对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    align-items:flex-start;
}
.inner{
    width: 90px;
    height:40px;
    margin-right: 10px;
    background:red;
}
#div2{
    align-self:flex-end;/*下对齐（默认为上对齐）*/
}

在这里插入图片描述

flex弹性布局
shanglinzzh的博客
09-06 256
<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
弹性布局Flex
qq_43218075的博客
05-22 631
Flex 是 是什么？弹性容器(Flex container)和弹性子元素(Flex item)的相关属性
css中的flex布局（弹性布局），代码 + 图片展示，详细的不得了，让你轻松掌握
最新发布
2402_84327094的博客
04-10 1514
flex布局也称为弹性布局，顾名思义，他会随着客户端不同设备的屏幕大小自动伸展或收缩盒子， flex布局是一种一维布局模型，因为一个flex盒子一次只能处理一行或一列的元素布局，grid布局才是二维布局，可以同时处理行和列上的布局。 flex布局默认不会换行，意思是在一个维度中他的子盒子溢出后，会将子盒子进行压缩，实在压缩不了的就溢出屏幕了；设置自动换行后，新的行就相当于一个新的flex盒子。
弹性布局
ly_521_xsy
08-09 194
CSS常用属性 弹性布局 display:flex; 弹性布局改变容器内部的布局方式：从流式布局 —> flex布局 主轴：默认为盒子水平方向，可以通过属性改变主轴方向。 交叉轴：与主轴垂直的即是交叉轴。 属性 flex-direction：容器内项目的排列方向(默认横向排列)　 常用取值：　 row ： 水平排列（左 —> 右） 　 　　 　　　row-reverse：水平排...
flex 弹性布局
飞扬_柳絮的专栏
04-10 206
参考资料: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 1、传统的布局方案：基于盒状模型，依赖 display 属性 + position属性 + float属性 2、弹性布局：(设...
Flex 弹性布局
Judy-Lin
08-30 189
Flex Flex，全称Flexible Box，意为**“弹性布局”**，用来为盒状模型提供最大灵活性。Flex布局需要在一个容器中实现，容器中的元素就是项目。其中，主轴一般默认是x轴，交叉轴一般默认是y轴。 设置“弹性布局”，让所有的子元素在一行显示，给display设置为flex，当前标签就为容器，其中的子元素为项目。 容器的属性 flex-direction 设置主轴方向 取值： row 项目从左到右依次摆放(默认值) row-reverse 项目从右到左依次摆放 column 项目从上到下依次摆放
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
flex布局
li_chun_can的博客
08-19 221
定义 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 模型 模型定义： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。特点：1. 每个弹性容器都有两根轴：主轴和交
弹性布局 flex布局
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流现象的发生。Flex布局非常适合用于结构化布局。 Flex布局的设置方式是在父元素上添加`display: flex`，这样子元素就可以自动地被挤压或拉伸。Flex布局由弹性容器、弹性盒子、主轴、侧轴/交叉轴组成。 在Flex布局中，`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`三个属性的简写，默认值为`0 1 auto`。其中`flex-grow`表示弹性元素的放大比例，`flex-shrink`表示弹性元素的缩小比例，`flex-basis`表示弹性元素的初始大小。 除了`flex`属性，还有一些其他的属性可以用来设置Flex布局，这些属性设置在容器上，包括`flex-direction`、`flex-wrap`、`flex-flow`、`justify-content`、`align-items`和`align-content`等属性，用来控制弹性容器和弹性盒子的布局方式。 总结来说，Flex布局是一种简单、灵活的布局模型，通过使用弹性容器和弹性盒子，可以精确控制块级盒子的布局方式，避免了浮动布局中的问题。使用Flex布局可以使网页的布局更加简单、灵活，适用于结构化布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Flex布局(弹性布局)-图文介绍](https://blog.csdn.net/qq_52031408/article/details/124053711)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [flex弹性布局](https://blog.csdn.net/m0_48958478/article/details/125508280)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值