I want to see the effect
In a side-by-side layout with a large number of “variable width” elements, the above is the best layout we want, but the FlexBox layout is not quite the same as the bullet, so we need to make a few small changes with the FlexBox.
CSS ready-made layout
Flex layout, with the ability to divide layouts equally, as shown
The problem
But we don’t want the bottom to be so evenly divided, we want it to be aligned with the previous row
plan
In fact, it is easy to implement by adding some hidden elements with equal width but zero height. As shown in figure:
The number of empty elements should not be less than the maximum number of elements in a single row. Finally, we can hide empty
.empty {
visibility: hidden;
}Copy the codeFull demo code
【JSFiddle 】 jsfiddle.net/zwwill/43qn…
<html>
<head>
<meta charset="UTF-8">
<title>Side by side and equally divided, single row on the left most neat layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
width: 1000px;
flex-flow: row wrap;
justify-content: space-between;
margin: 50px auto;
background-color: #ccc;
align-content: baseline;
}
.main span {
width: 132px;
height: 200px;
display: inline-block;
background-color: # 666;
margin: 4px;
}
.main .emp{
height: 0;
border: none;
margin-top: 0;
margin-bottom: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="main">
<span style="">1</span>
<span style="">2</span>
<span style="">3</span>
<span style="">4</span>
<span style="">5</span>
<span style="">6</span>
<span style="">7</span>
<span style="">8</span>
<span style="">9</span>
<span style="">10</span>
<span style="">11</span>
<span style="">12</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
<span class="emp" >empty</span>
</div>
</body></html>Copy the codeAnd finally look at the effect
