当前位置：网站首页>Multi row and multi column flex layout
Multi row and multi column flex layout
2022-07-07 12:30:00 【Xiaoding Chong duck!】
1、 Three lines and three columns , Margins are all 20px, Every box Width and height are 200px
Use flex Layout , Set the width and height of the outer box to 640px(200*3+20*2), In the use of align-content: space-between and justify-content: space-between that will do , The code is as follows ：
<style>
*{
padding:0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 640px;
background: rgb(243, 171, 171);
height: 640px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.Abox{
background: yellow;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">
<div class="Abox">1</div>
<div class="Abox">2</div>
<div class="Abox">3</div>
<div class="Abox">4</div>
<div class="Abox">5</div>
<div class="Abox">6</div>
<div class="Abox">7</div>
<div class="Abox">8</div>
<div class="Abox">9</div>
</div>
</body>2、 Multiple rows and three columns , Margins are all 20px, Every box Width and height are 200px, Highly adaptive content
Or use align-content: space-between and justify-content: space-between, Height has js calculated , In setting up to dom On ：
<style>
*{
padding:0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 640px;
background: rgb(243, 171, 171);
/* height: 640px; */
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.Abox{
background: yellow;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">
<div class="Abox">1</div>
<div class="Abox">2</div>
<div class="Abox">3</div>
<div class="Abox">4</div>
<div class="Abox">5</div>
<div class="Abox">6</div>
<div class="Abox">7</div>
<div class="Abox">8</div>
<div class="Abox">9</div>
<div class="Abox">10</div>
<div class="Abox">11</div>
<div class="Abox">12</div>
</div>
</body>
<script>
let parentDom = document.querySelector('.box');
let children = parentDom.children;
let rowNums = Math.ceil(children.length / 3);
parentDom.style.height = rowNums * 200 + (rowNums - 1) * 20 + 'px';
</script>3、 Three rows and many columns , Margins are all 20px, Every box Width and height are 200px, Width adaptive content
Law 1 ：
Or use align-content: space-between and justify-content: space-between, At this time, the width is determined by the content , So you can go through js Calculate and dynamically set the width ：
<style>
*{
padding:0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
background: rgb(243, 171, 171);
height: 640px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: space-between;
justify-content: space-between;
}
.Abox{
background: yellow;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">
<div class="Abox">1</div>
<div class="Abox">2</div>
<div class="Abox">3</div>
<div class="Abox">4</div>
<div class="Abox">5</div>
<div class="Abox">6</div>
<div class="Abox">7</div>
<div class="Abox">8</div>
<div class="Abox">9</div>
<div class="Abox">10</div>
<div class="Abox">11</div>
<div class="Abox">12</div>
</div>
</body>
<script>
let parentDom = document.querySelector('.box');
let children = parentDom.children;
let columnNums = Math.ceil(children.length / 3);
parentDom.style.width = columnNums * 200 + (columnNums - 1) * 20 + 'px';
</script>Law two ：
Spindle use justify-content: space-between, Cross axis use align-content: flex-start, At this time, there is margin control , Don't use js Control the width of the parent box ,width Set to fit-content：
The effect is as follows , At this time, the width of the parent box is only the width of a list of child elements , I have encountered this problem before , Namely flex-direction: column when , The width of multiple columns of child elements cannot expand the width of parent elements , Therefore, this plan cannot .
4、 Three lines and three columns , Margins are all 20px, Every box Width and height are 200px, Highly adaptive content , Child elements cannot be covered
The method of question two is used , If you find that the last line is less than three, there will be a space in the middle , It's not the effect we want ：
Law 1 ：
Use not shown div fill , To carry on the placeholder ：
<style>
*{
padding:0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 640px;
height: 640px;
background: rgb(243, 171, 171);
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.Abox{
background: yellow;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">
<div class="Abox">1</div>
<div class="Abox">2</div>
<div class="Abox">3</div>
<div class="Abox">4</div>
<div class="Abox">5</div>
<div class="Abox">6</div>
<div class="Abox">7</div>
<div class="Abox">8</div>
</div>
</body>
<script>
let parentDom = document.querySelector('.box');
let children = parentDom.children;
let n = children.length % 3;
// Don't cover
if (n) {
while (3 - n > 0) {
let div = document.createElement('div');
div.className = 'Abox';
div.style.visibility = 'hidden';
parentDom.appendChild(div);
n++;
}
}
</script>The effect is as follows ：
Law two ：
Spindle use justify-content: flex-start, Cross axis use align-content: space-between, The right margin is margin Set up , The last column nth-child(3n) Do not set the right margin ：
<style>
*{
padding:0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 640px;
background: rgb(243, 171, 171);
height: 640px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: flex-start;
}
.Abox{
background: yellow;
width: 200px;
height: 200px;
margin-right: 20px;
}
.Abox:nth-child(3n) {
margin: 0;
}
</style>
<body>
<div class="box">
<div class="Abox">1</div>
<div class="Abox">2</div>
<div class="Abox">3</div>
<div class="Abox">4</div>
<div class="Abox">5</div>
<div class="Abox">6</div>
<div class="Abox">7</div>
<div class="Abox">8</div>
</div>
</body>in addition , above 1、2、3 These situations that can be covered can also be realized by using the method of two .
边栏推荐
- College entrance examination composition, high-frequency mention of science and Technology
- idm服务器响应显示您没有权限下载解决教程
- 让数字管理好库存
- The IDM server response shows that you do not have permission to download the solution tutorial
- 对话PPIO联合创始人王闻宇：整合边缘算力资源，开拓更多音视频服务场景
- EPP+DIS学习之路（1）——Hello world！
- @What happens if bean and @component are used on the same class?
- 盘点JS判断空对象的几大方法
- Inverted index of ES underlying principle
- About sqli lab less-15 using or instead of and parsing
猜你喜欢
问题：先后键入字符串和字符，结果发生冲突
Attack and defense world ----- summary of web knowledge points
Visual studio 2019 (localdb) \mssqllocaldb SQL Server 2014 database version is 852 and cannot be opened. This server supports version 782 and earlier
Tutorial on the principle and application of database system (011) -- relational database
Customize the web service configuration file
The road to success in R & D efficiency of 1000 person Internet companies
Static comprehensive experiment
EPP+DIS学习之路（2）——Blink！闪烁！
【统计学习方法】学习笔记——支持向量机（下）
@Bean与@Component用在同一个类上，会怎么样？
随机推荐
普乐蛙小型5d电影设备|5d电影动感电影体验馆|VR景区影院设备
Tutorial on principles and applications of database system (007) -- related concepts of database
SQL lab 1~10 summary (subsequent continuous update)
NGUI-UILabel
Several methods of checking JS to judge empty objects
Unity map auto match material tool map auto add to shader tool shader match map tool map made by substance painter auto match shader tool
【统计学习方法】学习笔记——第四章：朴素贝叶斯法
跨域问题解决方案
顶级域名有哪些?是如何分类的?
Airserver automatically receives multi screen projection or cross device projection
30. Feed shot named entity recognition with self describing networks reading notes
zero-shot, one-shot和few-shot
什么是局域网域名?如何解析?
Processing strategy of message queue message loss and repeated message sending
消息队列消息丢失和消息重复发送的处理策略
【统计学习方法】学习笔记——逻辑斯谛回归和最大熵模型
File upload vulnerability - upload labs (1~2)
Cenos openssh upgrade to version 8.4
＜No. 8＞ 1816. 截断句子 （简单）
Experiment with a web server that configures its own content