flex 布局平均分布又能换行，子元素之间还要有空隙

最新推荐文章于 2024-06-12 14:19:48 发布
最新推荐文章于 2024-06-12 14:19:48 发布
阅读量1.7w 收藏 14
点赞数 8
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/visionke/article/details/90599733
版权

用flex-wrap: wrap;来换行，用justify-content: space-between;来平分，
在父元素末尾加上after伪元素，让其自动添补最后一个位置，高度设为0 便不影响后面的元素

举例我们需要3个元素为一行，并且平分布局

当元素不满足3个的的时候

刚好有九元素的时候

visionke
关注
  • 8
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flex布局各占50%,并实现中间有缝隙
小柠檬爱编程
05-18 8252
要实现子元素各占50%宽,中间留有缝隙的需求,如果设置右margin,第二个盒子会掉下去 所以我们都会使用padding,可是要是使用了右padding,左边容易就会少一块,那怎么才能解决既有缝隙,又让左右两个图片平分区域? 那就是给每一个li一个padding-right:10px,给ul父元素负的margin-left:-10px就实现了! <ul class="list-detail"> <li class="item-detail"> <a href.
flex 布局【笔记】
wanghuan1020的博客
05-05 534
flex 布局认识 flex 布局flex 布局模型flex 相关的属性应用在 flex container 上的 CSS 属性`flex-direction``justify-content``align-items``flex-wrap``flex-flow``align-content`应用在 flex items 上的 CSS 属性`order``align-self``flex-grow``flex-shrink``flex-basis``flex` 认识 flex 布局 弹性盒子是一种用于按行
css基础2：flex 多行均分有间隙布局
1363648943的专栏
11-13 1万+
效果图： 逻辑：一行有四个的情况 父元素：设置为 flex。justify-content 设置 space-between/space-around。 子元素：设置宽度 百分比／vw （width:calc((100% - 60px))/4 或者width:calc((100vw - 100px))/4 ) ...
每日小技巧：使用的flex布局时文字换行情况
最新发布
Cy01234的博客
06-12 462
很多小伙伴在写代码时可能都会有这样的一个烦恼，在屏幕尺寸进行缩放时或者在不同的手机屏幕尺寸不同时，使用的flex布局时文字有可能会掉下来。这时就有了这样的一个方法，flex-shrink。
flex布局产生的间隙解决方法
热门推荐
小柒的博客
03-11 1万+
flex布局的元素会有默认间隙，解决方法 align-content: flex-start 具体参数如下： 取值情况： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 stretch（默认值）：轴线占满整个交叉轴。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每...
space-between时,当为两个内容时中间被空出的解决方案
Front小思的博客
05-19 5008
用flex布局时用到justify-content:space-between属性让弹性容器内的元素向两端对齐,并且平摊对应的宽度！
flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
reg183的专栏
11-11 1401
flex布局采用justify-content:space-between,当为两个内容时中间被空出 给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”
CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
u012443286的博客
12-12 1万+
asd
vue flex 布局实现div均分自动换行的示例代码
12-28
 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap: wrap，自动换行。 二、vue代码 （1）html部分： &...
css3 flex布局实现平均分配元素的示例代码
11-20
本篇文章将深入探讨如何使用Flex布局来实现元素的平均分配。 首先，我们来看例子一： ```html <!DOCTYPE html> <title>flex 布局 * { padding: 0; margin: 0; } body, html { height: 100vh; min-...
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
 justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） flex-end 从主轴的尾部开始排，...
Flex布局实现div内部子元素垂直居中的示例
01-21
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），...
flex布局换行空白间隙之align-content的使用
11-20
同时，`flex-direction`被设置为`row`，表示子元素沿水平方向排列，`flex-wrap`设置为`wrap`，意味着当子元素无法在一行内完全显示时，它们将换行。子元素`.nav-right-item`具有固定宽度和高度，并且文本居中对齐。...
flex布局
单眼皮的小熊
01-15 536
布局的传统解决方案，是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局有时候不方便，比如一个盒子中左边一块固定宽度，右边的自动填充。 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 任何一个容器都可以指定
【CSS】flex 实现三栏等分布局
leo的博客
04-12 4213
flex 实现三栏等分布局
Css3 弹性盒子布局
LiBo
11-11 874
display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 https://www.runoob.com/css3/css3-flexbox.html 1 flex-direction:指定了弹性容器中子元素的排列方式 row 横向从左到右排列（左对齐），默认的排列方式 row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面 ...
【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-06 4239
一、设置子元素是否换行 : flex-wrap 样式说明 1、flex-wrap 样式引入 2、flex-wrap 样式取值说明 二、代码示例 1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行 2、代码示例 : 自动换行
display:flex flex-grow
gxh0816的博客
02-10 903
我的css学得真的好差,今天遇到一个样式搞了半天. ## 问题: 首先我需要将这两部分分为一个在右边一个在左边.这个比较简单 可以通过 display: flex; justify-content: space-between;来实现. 问题出在了,因为这是对半分的,所以左边和右边的width各占一半.这样会出现一个问题就是,我页面缩小的时候,我左边文字多的部分可能会被遮盖住.但是我右边还空了很多.如下图 我肯定希望我左边的宽度大一点,右边的宽度小一点.那么怎么做呢? ## 解决方法:...
用flex加百分比实现左右布局，右边区域再上下等分
qq_36358940的博客
04-05 7607
用flex加百分比实现左右布局，右边区域再上下等分为三份。 demo可以延伸： 1.右边区域等分为二分之一.container .rightWrapper &gt; div的width设置为对应的百分比（50%）， 四分之一（25%），以此类推。 2.左边区域上下或者左右布局（添加子元素，类似设置）。 3.加上浏览器前缀，处理flex布局的兼容性问题 &lt;!DOCTYPE html&gt;...
flex布局内的元素自动换行
05-19
在 Flex 布局中，如果容器中的元素宽度超过了容器的宽度，通常会使这些元素自动缩小以适应容器宽度。但是，如果希望这些元素在容器中自动换行而不是缩小，可以使用 `flex-wrap` 属性。默认情况下，`flex-wrap` 属性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值