すべて同じ幅のアイテムがいくつかある Flexbox を使いたいのですが、Flexbox はスペース自体ではなく、スペースを均等に分配することに気づきました。
例えば:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
最初の項目は 2 番目の項目よりかなり大きいです。項目が 3 つ、4 つ、または n 個ある場合、項目ごとに同じスペースですべての項目を同じ行に表示する必要があります。
何か案は?
ベストアンサー1
(すべての要素が同じ開始点を持つように)設定し、拡大できるようにしflex-basis
ます。0
flex: 1 1 0px;
IDE またはリンターが について言及している可能性がありますthe unit of measure 'px' is redundant
。これを省略すると ( のようにflex: 1 1 0
)、IE はこれを正しくレンダリングしません。そのため、px
@fabb のコメントで言及されているように、Internet Explorer をサポートするには が必要です。