使用flex-wrap实现弹性盒自动换行

最新推荐文章于 2024-05-11 15:43:26 发布
最新推荐文章于 2024-05-11 15:43:26 发布
阅读量2.1w 收藏 20
点赞数 11
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/digger_419/article/details/102897796
版权

布局的时候，我们常常会需要一行排列3/4/5/6个盒子，必要时自动换行，这时可以借助CSS3中的flex-wrap属性。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap为默认值，wrap必要时实现自动换行，reverse必要时换行并反向排列

关键是在父元素中设置flex-wrap值为wrap, 然后是设置子元素的width为合适的值，盒子间设置间距的话借助margin属性，效果如下：

digger_419
关注
  • 11
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3488
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
web一阶段 day20
gaoyuan0277的博客
08-05 173
flex-wrap属性：指定弹性盒子的子元素换行方式换行，第一行显示在上方换行，第一行显示在下方默认值，不换行注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙父元素高度有内容撑开换行没有缝隙align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）要设置： flex-wrap: wrap;顶端没有行间距底对齐没有行间距居中没有行间距两端对齐，中间自动分配, 元素位于各行之间留有空白空间。...
Css Flex 弹性布局中的换行与溢出处理方法
热门推荐
忧郁的蛋的专栏
10-02 1万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
CSS-flex布局
最新发布
Kevin7_35Durant的博客
05-11 1764
给父级元素的展示效果设置为flex布局，整个flex容器 里面的flex item都会沿着主轴展开。作用：flex items（弹性盒子）可以自动挤压或拉伸，默认弹性盒子会在一行显示。属性：flex-direction(修改主轴方向，侧轴也会随着改变)我们给三个盒子的宽设置为300px,父级盒子的宽设置为800px。属性值：整数数字，表示占用父级剩余尺寸的份数，默认是1份。作用：控制flex items在主轴方向的尺寸。网页呈现的效果：三个盒子的宽被挤压了。属性：flex-wrap。
css之弹性盒子
m0_71884549的博客
07-26 991
弹性盒子
flex布局warp自动换行后按顺序排列
皮卡丘
05-05 2387
flex布局warp自动换行后按顺序排列 一、现象 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>
flex布局常用布局方式（一行显示固定个数，自动换行显示）
Serena_tz的博客
11-23 1万+
基于uni-app实现一行显示固定个数的元素，元素可以遍历生成的，并且自动换行显示，效果如下图所示。// 这里一行显示4个，所以是/4，一行显示几个就除以几 // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整 min-width: calc((100% - 60rpx) / 4); max-width: calc((100% - 60rpx) / 4); // 每行最右侧的那个不设置右外边距
CSS盒模型概述
橘猫吃不胖的博客
10-18 1066
CSS盒模型概述 1 盒模型概述 1.1 标准盒模型 1.2 怪异盒模型 2 块级盒子和内联盒子 3 盒子模型的相关属性 3.1 边框属性border 3.2 内边距属性padding 3.2.1 padding百分比值 3.3 外边距属性margin 3.3.1 margin合并 3.3.2 margin: auto 3.4 背景属性background 3.5 阴影属性box-shadow 4 内联盒子 5 制作各种形状 5.1 三角形 5.2 宽高自适应的正方形 5.3 扇形 5.4 三条横杠 5.5
CSS实现换行
weixin_72329752的博客
08-10 351
表示当文本超出边界时，自动将单词截断换行，但如果单词本身就很长，仍然会超出边界；表示任意位置换行，甚至可以在单词中间断开。但是会破坏单词完整性；
AngularJS 实现弹性盒子布局的方法
10-21
3. `flex-wrap`：控制是否换行，可选值有`nowrap`（默认，不换行）、`wrap`（换行，第一行在上方）和`wrap-reverse`（换行，第一行在下方）。 4. `justify-content`：在主轴上对齐子项，可选值有`flex-start`（默认...
flex-container:使用Flex
03-27
- **flex-wrap**：决定子元素是否换行，可选值有`nowrap`（默认，不换行）、`wrap`（换行）和`wrap-reverse`。 - **justify-content**：设置沿主轴上的对齐方式，如`flex-start`（默认，左对齐）、`flex-end`（右...
CSS弹性盒模型flex在布局中的应用详解
09-24
- **flex-wrap**：控制是否允许换行，`nowrap`（默认，不换行）、`wrap`（换行，第一行在上方）和`wrap-reverse`（换行，第一行在下方）。 - **align-content**：在多行布局中，调整行在侧轴上的对齐方式，与`align-...
FlexBox-flex-direction:flex，inline-flex。 弹性方向
03-06
在实际应用中，`flex-direction`配合其他Flex属性，如`justify-content`（主轴对齐）、`align-items`（交叉轴对齐）和`flex-wrap`（是否换行），能实现丰富的布局效果。例如，`justify-content`可以调整项目在主轴上...
flex多行布局弹性盒子
03-05
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，主要用于解决传统布局方式在处理复杂网页布局时遇到的问题，尤其是对于响应式设计和自适应布局有着强大的支持。它允许容器中的子元素...
样式布局flex----一行五个元素，随着屏幕变化宽度发生改变
CC酱写前端的博客
07-29 5169
CSS flex布局
智能布局（ 弹性盒 ）
AI-fisher的博客
10-27 781
文章目录一、开启弹性盒布局（display）——父容器二、伸缩换行 (flex-wrap)——父容器三、排列方式(flex-direction)——父容器四、伸缩流方向与换行(flex-flow)——父容器五、主轴横向对齐 (justify-content)——父容器六、主轴纵向对齐 (align-content)——父容器七、侧轴对齐（align-items/align-self）——父容器/子...
css今日学习：弹性盒子
m0_46387864的博客
04-27 1164
弹性盒子（flex） 描述：通过两个轴控制容器内的项目,默认x轴为主轴，y轴为副轴 常用属性： 在容器上的属性 flex-direction 控制主轴方向：默认x轴是主轴 属性： column 纵向，上到下 column-reverse 反纵向，下到上 row 横向，左到右 row-reverse 反横向，右到左 flex-wrap 控制超出的项目进行换行。 属性： nowrap 不换行，项目会等比缩放在一行 wrap 换行，按容器的副轴的宽度等分 wrap-reverse 反wrap换行 flex-flo
前端学习（271）：网格布局grid-template
歌谣的博客
12-31 333
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
css中弹性盒子自动换行
08-30
在 CSS 中，弹性盒子（Flexbox）默认是单行排列的，如果内容超出了容器的宽度，会导致内容溢出或者缩小。要使弹性盒子自动换行，可以通过设置容器的 `flex-wrap` 属性。 `flex-wrap` 属性有三个可能的取值： - `nowrap`（默认）：不换行，即内容溢出容器。 - `wrap`：在需要换行时进行换行。 - `wrap-reverse`：在需要换行时进行换行，但是换行的方向与正常方向相反。 要使弹性盒子自动换行，可以将容器的 `flex-wrap` 属性设置为 `wrap`。 例如，以下是一个简单的示例： ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> ``` ```css .container { display: flex; flex-wrap: wrap; /* 设置为自动换行 */ } .item { width: 100px; height: 100px; background-color: #ccc; margin: 10px; } ``` 这样，当容器的宽度不足以容纳所有子项时，子项会自动换行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值