我不知道为什么flex div中的8个内联块元素会受到挤压,而不遵守其设置(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>
这里的关键是添加“ 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>
因为设置了宽度。只需删除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
会适应大小,从而使子项变小。