您不应设置任何大小。您可以使用额外的元素或带有％的垂直填充的伪元素。这将允许您使用width作为参考：显示以下内容的代码段：
.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row; justify-content: space-around; line-height:30px;}.flex-item { background: tomato; margin: 5px; color: white; font-weight: bold; font-size: 1.5em; text-align: center; flex: 1 0 auto; height:auto;}.flex-item:before { content:''; float:left; padding-top:100%;}<body> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div> <div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> </div></body>一个inline-block的元素可以做太多，只是适应框的显示/行为和它的内容。这里的魔力来自于填充：50％0;（100％的垂直填充等于父级的宽度）。有关垂直边距和填充，
