弹性容器内的块元素被挤压。但为什么？答案

【问题标题】：Block elements inside a flex container get squeezed. But why?弹性容器内的块元素被挤压。但为什么？
【发布时间】：2015-10-16 19:46:32
【问题描述】：

我想知道为什么 flex div 中的 8 个 inline-block 元素会被挤压并且不符合它们的设置 (width: 50px)。

div {
  display: flex;
  justify-content: center;
  border: 1px solid red;
  width: 150px;
  overflow: auto;
}

a {
  display: inline-block;
  background: orange;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
</div>

【问题讨论】：

标签： html css width flexbox

【解决方案1】：

这里的关键是添加“flex-shrink: 0;”并删除“justify-content: center;”

div
{
 display: flex;
 border: 1px solid red;
 width: 150px;
    overflow: auto;
}

a 
{
 display: inline-block;
 background:orange;
 width: 50px;
 height: 50px;
 margin: 10px;
 flex-shrink: 0;
}

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
</div>

http://jsfiddle.net/zogybegu/

【讨论】：

【解决方案2】：

因为它的宽度是固定的。只需删除width: 150px;。

div {
           display: flex;
           justify-content: center;
           border: 1px solid red;
           overflow: auto;
        }

        a {
           display: inline-block;
           background:orange;
           width: 50px;
           height: 50px;
           margin: 10px;
        }

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
</div>

如果 flex div 的空间足够大，可以容纳所有孩子，则此方法有效。否则div 会适应大小，使孩子变小。

【讨论】：