flex布局控制每行显示几个且有间隔

实现一个父元素包裹多个子元素，且每行只能有三个宽度不固定的子元素。父元素内部边距是32px，相邻两个B元素的间距是16px。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.parent {box-sizing: border-box;min-width: 1000px;padding: 32px;display: flex;flex-wrap: wrap;border: 1px solid #000;}.client-b {/** 考虑到border 设置盒子模型 **/box-sizing: border-box;width: calc((100% - 32px) / 3);/* flex: 0 0 32%; */height: 100px;border: 1px solid #999;}.client-b:nth-child(3n + 2) {margin: 0 16px;}</style>
</head>
<body><div class="parent"><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div></div>
</body>
</html>

如果是4个呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.parent {box-sizing: border-box;min-width: 1000px;padding: 32px;display: flex;flex-wrap: wrap;border: 1px solid #000;}.client-b {margin-right: 16px;box-sizing: border-box;width: calc((100% - 48px) / 4);/* flex: 0 0 32%; */height: 100px;border: 1px solid #999;}.client-b:nth-child(4n) {margin-right: 0;}</style>
</head>
<body><div class="parent"><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div></div></body>
</html>

flex布局控制每行显示几个且有间隔相关推荐

## 使用flex布局（多行，一行三个），换行后最后一行左右对齐问题
使用flex布局(多行,一行三个),换行后最后一行左右对齐问题 <html><head><style>html,body,ul {margin: 0;padding ...
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录一.分辨率分类二.视口三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
flex布局之多行多列
1.三行三列,边距都是20px,每个box宽高都是200px 使用flex布局,给外层盒子宽高都设置成640px(200*3+20*2),在使用align-content: space-between ...
css3 flex 省略号,142.关于flex布局与省略号不显示的问题
关于flex布局下,css省略号不显示的问题主要有两种场景场景一.直接在flex布局的元素里 html 我们日常工作中,接触到的主要 API,几乎都是由今天所讲解的这些对象提供的.理解这些对象的性质 ...
flex布局——换行——多行换行
布尔flex displaya:flex 改变主轴:flex-direction:row-reversc center:主轴结束位置 space-between:两端对齐 flex-and:主轴结束的 ...
flex布局的应用 —— 模仿携程移动端的首页
写在前面昨天已经过去,未来还未到来,所以当下是上天给的最好的恩赐,好好把握. 昨天又很仔细的看了看flex布局,今天下午动手用flex布局做了一个练习,就是模仿携程移动端首页.有一段时间没写html ...
CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
37. flex布局
flex布局也叫弹性布局目录 1 初识flex布局 2 flex父项常见属性 2.1 设置主轴方向 flex-direction 2.1.1 由左到右 row 2.1.2 从右到左 row ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...

flex布局控制每行显示几个且有间隔

flex布局控制每行显示几个且有间隔相关推荐

最新文章

热门文章