使用display:flex实现多个子标签等分间距排列

最新推荐文章于 2024-09-14 13:04:57 发布
最新推荐文章于 2024-09-14 13:04:57 发布
阅读量7.2k 收藏
点赞数 2
文章标签： css flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monkey_xiaoda/article/details/103815750
版权
本文介绍如何使用display:flex和justify-content: space-between解决li标签个数不固定时的等分排列问题。在理解space-between属性的基础上，通过在li标签前后添加伪类以确保所有子元素间间距均匀。这种方法避免了使用固定margin导致的生硬效果，并解决了实际布局中出现的间距不均问题。
摘要由CSDN通过智能技术生成

今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图：

因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了；

 

于是想到了使用display:flex;justify-content: space-between;align-items: center;（有浏览器兼容问题）

但出现了如下问题：

li标签之间的间距并没有真正意义上的等分；

先是复习了一遍space-between属性的意思：

justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素

最低0.47元/天 解锁文章
来吧小哒
关注
弹性display: flex布局自看笔记
木子聊前端
07-03 1134
块级元素默认的display 属性都是block 状态，而当给块级元素display 属性加上flex值，flex 布局就被创建 比如div 直接设置 display:flex，这时候当div被称为 flex 容器，里面的子项元素称之为 flex 子项
display flex 左右_前端布局神器display:flex
weixin_34500880的博客
01-17 595
2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么？Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display: -webkit-flex; /*在webkit内核的浏览器上使...
flex布局
weCat_s的博客
09-09 248
详见 阮一峰老师博客 Flex布局即为弹性盒子布局，采用Flex布局的元素，称为 Flex容器，简称"容器"，它的所有子元素自动成为容器成员，称为 Flex项目，简称 “项目”。 容器的属性： 1.flex-direction 主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿； 2.flex-wrap 换行方式 nowra
CSS——弹性盒子布局（display: flex）
最新发布
懒羊羊大王的博客
09-14 2314
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
浅谈display:flex
07-25 1033
display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢？ 一、页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。 2.当.left,.right 的宽度是...
flex布局中，元素等间距设置，包括第一个元素的左边，最后一个元素的右边，也等间距
m0_73829151的博客
11-16 2350
通过上面代码，可以实现子元素的等间距排放。但是第一个元素和末尾的元素，到左边和右边 不会等间距排放，可以通过伪元素来实现。这样就 可以实现等间距排放了。在做下面的小程序中遇到了这个问题，记录下，希望能给你带来方便。项目中很多地方会用到等间距排放的场景，使用flex 布局可以很方便的实现。
display: flex布局
guoqkmiss的博客
08-27 693
flex布局 运用在flex container上的属性 flex-direction： 确定主轴方向 flex-wrap： 设置是否换行 flex-flow： 设置主轴方向和是否换行 justify-content：延主轴方向的布局方式 align-item： 延交叉轴方向的布局方式 align-content： 多根轴线的布局方式 运用在Flex items上的属性 order： item的排序，可以为负值 flex-basis： 设置item基础宽度 flex-grow： 设置计算后如果存在剩余
【CSS布局】Flex布局中元素换行设置间距问题
随心所欲的便笺
03-08 2万+
flex布局解决换行问 1. 父元素定高的情况下，直接使用 align-content: space-between; ul{ list-style: none; display: flex; height: 614px; flex-direction: row; flex-wrap: wrap; justify-content: space-bet.
弹性布局（display:flex；）属性详解（笔记）
weixin_67940531的博客
03-15 1098
一、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二、容器属性 2.1 flex-direction: row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 ...
弹性盒学习笔记(display:flex/inline-flex;)
lwr3379966的博客
03-21 2148
文章目录弹性盒学习笔记(display:flex/inline-flex;)一.flex容器属性（给父级元素添加的属性）1、display:flex、inline-flex2、flex-direction属性 决定主轴的方向（即项目的排列方向）3、flex-wrap属性，定义子元素是否换行显示4、 flex-flow5、 justify-content属性 定义了项目在主轴（）上的对齐方式。6、a...
display: flex; 子元素设置间距
01-17
可以实现子元素的等分间距排列。可以通过设置margin属性来给子元素设置间距。 以下是一个示例代码： ```html .container { display: flex; justify-content: space-between; } .item { margin-right: 10px...
display:flex布局方式
brimen的博客
03-04 3278
2009年，W3C提出了一种新的方案–Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 一、容器属性 1、基本概念 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 15万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
css问题：display:flex布局+justify-content: space-between； 最后一行不能左对齐
qq_44146522的博客
09-05 1373
h1>方法2：网格布局 display: grid;问题：flex布局+justify-content: space-between;最后一行不能左对齐方法1：display: flex;/* 一行减去item的宽度后剩下的间距 *//* 一行减去item的宽度后剩下的间距 *//* 每个item左右的间距 *//* 每个item左右的间距 *//* 一行几个 *//* 一行几个 */
display:flex 元素垂直居中，有间距，右对齐，gap属性
徐同保的专栏
08-30 3392
.m-design-header-action{display: flex;padding: 0 18px 0 0; align-items: center; width: 180px;gap: 8px;text-align: right;justify-content: flex-end;}
弹性布局display:flex
qq_26905813的博客
11-10 2569
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
css3-弹性布局display: flex;
qq_35515563的博客
02-26 576
记录：一、弹性布局，父级设置display: flex; 二、常用div是否间隔居中和对齐，类似floatjustify-content: flex-start | flex-end | center | space-between | space-around;justify-content: 左对齐 | 右对齐 | 居中 | 两端对齐 | 两端对齐再增加一定间隔;三、常用内容长度全屏拉伸，置于...
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
歌谣的博客
09-03 1670
目录 一、基本概念 二、容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 align-content: 结合justify-content和align-items，看看在flex-direction两个不同属性值的作用下，轴心有什么不同： 三、项目属性 3.1 order属性 3.2 flex-grow属性 3.3 flex-shrink...
display布局等分空间、瀑布流布局
RainHg的博客
04-20 435
1、display布局，盒子宽度不是固定的，跟着行宽变化，等分空间，中间有间隔；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值