我有以下要求
绿色的父母宽度将根据设备宽度而变化.我需要所有的盒子在父母的中心.
我已经尝试了以下的事情,但并没有帮助我.
试用1
Parent {text-align：center}框{display：inline-block}.
这导致以下输出
试用2
Parent {text-align：center}框{float：left}.
这导致以下输出
试用3
Parent {display：flex}框 – >合理化合理之间也没有工作.
.parent {
text-align: center;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
<div class="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
对此的任何帮助将不胜感激.
解决方法
没有Javascript这很难用浮动和/或内嵌块.
FlexBox提供了一些希望,但即使需要一些创造力.
本质上,只要“每行”元素的最大数量就可以创建一个所需数量的不可见元素,这些元素可以与justify-content相结合：中心通过基本上推送最后一行内容来实现所需的最后一行回到左边.
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
.parent {
text-align: center;
border: 1px solid grey;
width: 80%;
max-width: 800px;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
.balancer {
height: 0;
width: 100px;
margin: 0 10px;
visibility: hidden;
}
<div class="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="balancer"></div> <div class="balancer"></div> <div class="balancer"></div> <div class="balancer"></div> </div>
