flex布局各占50%,并实现中间有缝隙

最新推荐文章于 2024-05-24 17:57:30 发布
最新推荐文章于 2024-05-24 17:57:30 发布
阅读量8.2k 收藏 2
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/116997254
版权

在这里插入图片描述
要实现子元素各占50%宽,中间留有缝隙的需求,如果设置右margin,第二个盒子会掉下去

所以我们都会使用padding,可是要是使用了右padding,左边容易就会少一块,那怎么才能解决既有缝隙,又让左右两个图片平分区域?

那就是给每一个li一个padding-right:10px,给ul父元素负的margin-left:-10px就实现了!

 <ul class="list-detail">
	 <li class=
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。...到此这篇关于Flex布局让子项保持自身高度的实现的文章就介绍到这
flex布局Flex实现常见布局的汇总
04-11
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。 先简单介绍一下，要使用flex...
进一步了解flex布局—来实现这些常见布局吧
weixin_40581617的博客
07-23 742
 flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下：   html代码：   &lt;div class="container"&gt; &lt;header&gt;header...&lt;/heade...
flex布局产生的间隙解决方法
热门推荐
小柒的博客
03-11 1万+
flex布局的元素会有默认间隙，解决方法 align-content: flex-start 具体参数如下： 取值情况： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 stretch（默认值）：轴线占满整个交叉轴。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每...
[css] flex布局 元素自动换行三列布局
最新发布
weixin_44405693的博客
05-24 1042
如图：要实现这种布局方法：方法三。
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
U_Are_My_Halo的博客
09-21 3999
解决flex自动换行属性 中间有空行的问题
flex布局换行后有缝隙怎么解决
m0_73228367的博客
12-14 2132
flex布局换行后有缝隙怎么解决
flex布局后的行与行之间空白间隙解决
weixin_43797908的博客
08-20 4199
display:flex; justify-content:space-between; flex-wrap: wrap; align-content: flex-start;/*子元素之间取消空白间隙，并把项目放在容器顶部。*/
flex 布局平均分布又能换行，子元素之间还要有空隙
visionke的博客
05-27 1万+
用flex-wrap: wrap;来换行，用justify-content:space-between;来平分， 在父元素末尾加上after伪元素，让其自动添补最后一个位置，高度设为0 便不影响后面的元素 举例我们需要3个元素为一行，并且平分布局 当元素不满足3个的的时候 刚好有九元素的时候 ...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
使用Flex布局实现头部固定内容区域滚动的方法
12-28
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。 Flex布局好处：1.不破坏html文档流 2.兼容性更好。 display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。 ...
详解flex实现左右布局中按钮溢出隐藏效果
09-22
本文将深入探讨如何使用Flex布局来解决这个问题，特别是如何在左右布局中实现按钮溢出隐藏的效果。 首先，让我们回顾一下Flex布局的基本概念。Flex布局，全称为Flexible Box，是CSS3中的一种布局模式，它为复杂页面...
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布局换行间距有很大缝隙
rainylf的博客
01-05 1974
flex布局换行的时候行与行间距缝隙过大解决方法
flex布局换行后出现间隙问题
HDdgut的博客
12-21 1753
align-content是Flex布局中用于控制多行子项在交叉轴上的对齐方式的属性。它仅在有多行子项时才会生效，如果子项只有一行，则align-content属性不会产生任何效果。align-self 是Flex布局中用于单个子项控制其在交叉轴上的对齐方式的属性。通过为单个子项设置 align-self 属性，可以覆盖容器的 align-items 属性，从而针对该子项进行个别的对齐方式设置。问题：换行后，行间出现空白间隔，如果没有设置父容器的高度，不会出现这个问题，父容器高度会随子项增多，而变大。
css基础2：flex 一行均分有间隙布局
1363648943的专栏
04-04 2518
最近有朋友问我布局问题。要点：怪异盒模型。写波笔记〜〜〜 有一个 ul 下面有 5个 li ,前四个 li 右边有 20的边距。最后一个 li 没有边距。求均分？ 效果图如下 ： 方法如下： 方法一： <ul> <li><div></div></li> ...
CSS中的弹性布局：flex
qq_43835345的博客
06-20 724
CSS中的弹性布局：flex
flex弹性盒子布局:
qq_60839348的博客
11-30 529
flex弹性盒子布局:
flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
reg183的专栏
11-11 1401
flex布局采用justify-content:space-between,当为两个内容时中间被空出 给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”
flex布局一行两个
09-10
要在一行中使用 flex 布局实现两个元素并排显示，可以使用以下样式： HTML： ```html <div class="container"> <div class="item">元素1</div> <div class="item">元素2</div> </div> ``` CSS： ```css .container { display: flex; } .item { flex: 1; } ``` 在上面的示例中，我们创建了一个包含两个子元素的容器（`.container`），然后通过设置容器的 `display` 属性为 `flex`，将其变为 flex 容器。 然后，我们为子元素（`.item`）设置了 `flex: 1` 属性。这表示每个子元素将根据可用空间均等地占据容器的宽度，从而实现两个元素在一行中并排显示。 你可以根据需要调整子元素的样式和容器的样式来满足具体的布局要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值