Applet project encountered such a layout (The following is A)
The flex assembly for the layout, the effect is not found after aliquots finished, as shown below
Then their hands, roll up a piece of code test and found the same pattern in the web end is achieved A layout, and then created a small program page, I write test code is filled in, we found that the effect is A, this next bit ignorant, and in the end is what impact the layout display, then looked thin code and found such a code <div style = 'clear: both;'> </ div>, after he commented, page layout can be achieved a style .
The following is a web-based test css code:
.icons-list {
width: 600px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-around;
position: relative;
flex-wrap: wrap;
border-radius: 10px;
background: #fff;
padding: 24px;
}
.icons-list .icon-box {
float: left;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
z-index: 1;
}
.icon-img {
width: 60px;
height: 60px;
}
.icon-text {
font-size: 12px;
color: #222;
line-height: 12px;
margin-top: 16px;
}
html part:
<div class="icons-list">
<div class='icon-box'>
<div class='icon-img'></div>
<div class='icon-text'>test1</div>
</div>
<div class='icon-box'>
<div class='icon-img'></div>
<div class='icon-text'>test2</div>
</div>
<div style='clear: both;'></div>
</div>
After the effect of contrast before </ div> after;: < 'both clear' div style => commented
I guess the reason: flex layout with floating inside a relationship, coupled with clear float will destroy