display:flex 意思是弹性布局

最新推荐文章于 2025-04-10 23:09:07 发布
最新推荐文章于 2025-04-10 23:09:07 发布
阅读量7.5k 收藏 7
点赞数
分类专栏： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013078295/article/details/72802897
版权
本文介绍使用CSS的display:flex属性进行弹性布局的方法，包括解决传统布局的局限性，实现元素的灵活排列与居中，适用于不同屏幕尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载： http://www.cnblogs.com/manman04/p/5704660.html

display:flex 意思是弹性布局

 

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例，这样的布局就方便很多。

 

 二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分 

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子



100-京东导航栏-插槽使用-弹性布局(display: flex；)
jolinoy的博客
07-13 575
100-京东导航栏-插槽使用-弹性布局(display: flex;)display:flex 这是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后， 将内容区flex：1，内容区则会自动放大占满剩
display: flex; Flex布局的详细介绍
weixin_46399753的博客
03-13 1154
前言 display：flex Flex布局在页面布局中应用的非常广泛，它能轻易的实现某些效果，但相对来说属性概念较多，想要掌握Flex布局并在项目中灵活运用也不是那么容易，在此我就来总结一下Flex布局的常用属性概念和用法，希望对你学习掌握有帮助。 一、什么是Flex布局？ Flex布局是2009年W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持...
浅谈display:flex
07-25 1072
display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢？ 一、页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。 2.当.left,.right 的宽度是...
display：flex
qq_37805832的博客
08-15 546
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0px;margin: 0px;} ul { list-style: none; width: 600px; border: 1px solid red; margin: 1
css中的flex布局（弹性布局），代码 + 图片展示，详细的不得了，让你轻松掌握
最新发布
2402_84327094的博客
04-10 1432
flex布局也称为弹性布局，顾名思义，他会随着客户端不同设备的屏幕大小自动伸展或收缩盒子， flex布局是一种一维布局模型，因为一个flex盒子一次只能处理一行或一列的元素布局，grid布局才是二维布局，可以同时处理行和列上的布局。 flex布局默认不会换行，意思是在一个维度中他的子盒子溢出后，会将子盒子进行压缩，实在压缩不了的就溢出屏幕了；设置自动换行后，新的行就相当于一个新的flex盒子。
display flex
catherine的博客
11-09 1384
display flex是什么？display flex是将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）在web网页中必须要考虑兼容性，因为浏览器不同，浏览器的支持和实现方式也不同，导致兼容起来略显麻烦不过，开发微信小程序的话，并不需要考虑其他浏览器。display flex布局使用方法设定一个容器，其中有多个子容器，比如，这是一个简单的例子&lt;div style="width:40...
display: flex弹性布局
10-12
display: flex弹性布局
html中关于display值以及display：flex弹性布局
lingjiaxiaozila的博客
08-15 4218
display 指定 HTML 元素盒子类型：none: 表示此元素不会被显示。block: 元素将显示为块级元素，前后会带有换行符。Inline:元素会被显示为内联（行内）元素，元素前后没有换行符inline-block: 行内块元素。list-item: 元素会作为列表显示 flex-direction 指定了弹性容器中子元素的排列方式：row（默认值）：水平方向排列，起点在左端。row-reverse：反向水平排列，起点在右端。column：纵向垂直排列，起点在上方。column-reverse：反向
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...
弹性盒子display：flex
你还有我
12-21 3757
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder 弹性盒子 声明定义： 使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。 【注】一般是使用display:flex. inline-flex极少用。 flex:如果没有为父
弹性布局（display: flex）
热门推荐
2401_84341405的博客
04-27 2万+
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
CSS3 -- display:flex
weixin_34117211的博客
02-14 199
弹性盒子 零、 父元素为display: flex;孙元素不受影响：所以想让子元素不受父元素影响，在子元素上套一层，让子元素变成孙元素 一、容器的属性（6） display、flex-direction、flex-wrap、justify-content、align-items、align-content ❶ display: inline-flex / flex; (Web...
CSS中的display: flex；
2301_77523055的博客
04-22 758
是CSS（层叠样式表）中用于设置容器为弹性盒子模型（Flexbox）的属性值。弹性盒子模型是CSS3中引入的一个新的布局模式，它设计用来更好地在容器中布局、对齐和分配空间给子元素（即容器内的项目），即使容器的大小是动态变化的或者未知的。使用Flexbox，你可以轻松地控制子元素的对齐方式（水平或垂直）、排列顺序、空间分配等，而无需使用浮动或定位等传统方法，这大大简化了复杂的布局任务。时，这个元素会变成一个弹性容器，而它的直接子元素则自动成为弹性项目（flex items）。
display:flex属性
weixin_46069849的博客
03-01 642
display:flex属性 1.flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse： 显示为行。但方向和row属性值是反的 column： 显示为列 column-reverse： 显示为列。但方向和column属性值是反的 2.flex-wrap : nowrap; ...
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
display：flex 弹性布局不拉伸
02-21
### 解决 `display: flex` 子元素不自动拉伸的问题 当遇到 `display: flex` 布局中的子元素未能按照预期进行拉伸的情况时，通常是因为某些 CSS 属性设置不当所致。为了确保子元素能够正常拉伸，可以考虑以下几个方面： #### 1. 设置父容器属性 确保父容器已经正确设置了 `display: flex` 或者 `inline-flex`，这会使得其内部的直接子元素成为弹性项并遵循相应的布局规则[^1]。 ```css .parent { display: flex; } ``` #### 2. 调整子元素的生长因子 (`flex-grow`) 为了让某个特定的子元素占据剩余的空间，应该给该子元素应用 `flex-grow` 属性，并将其值设为大于零的数值。这样即使其他兄弟节点存在固定尺寸，此元素也会尽可能扩展自己来填充可用空间[^3]。 ```css .child-that-needs-to-expand { flex-grow: 1; } ``` #### 3. 控制收缩行为 (`flex-shrink`) 有时尽管指定了增长比例，但由于页面宽度有限或其他原因导致无法完全展开，则可以通过调整 `flex-shrink` 来控制是否允许这些项目缩小以适应更小的空间。默认情况下它的值是 `1` 表示可缩减；而将其置为 `0` 则意味着不允许任何程度上的压缩[^2]。 ```css .prevent-from-shrinking { flex-shrink: 0; } ``` 通过上述方法之一或组合使用，大多数关于 Flexbox 中子组件未按期望方式拉伸的问题都可以得到妥善处理。当然，在实际开发过程中还需要根据具体场景灵活运用这些技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值