Flexboxでjustify-content
やalign-items
を使うと簡単に中の要素を中央揃えさせることができますが、画面サイズによって、要素の大きさが変わってしまいます
これを固定することはできますか?
flexboxを要素を簡単に中央揃えできるbox(画面サイズによって伸び縮みしてほしくない)として使いたいのですがどうすればいいのでしょうか?
width
やheight
を使っても上手くいきませんでした
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するflex-grow: 0;
flex-shrink: 0;
とすると画面幅によらず、width
に従います。(高さに関しては未検証です。)
width
でなくflex-basis
を使うのならばflexショートハンド
を使って、
flex: 0 0 10em;
の様に指定する事も出来ます。
div{
border-style: solid;
}
.box{
display: flex;
justify-content: center;
border-color: blue;
}
.item-by-width{
width: 10em;
flex-grow: 0;
flex-shrink: 0;
border-color: orange;
}
.item-by-basis{
flex-basis: 10em;
flex-grow: 0;
flex-shrink: 0;
border-color: orange;
}
<div class="box">
<div class="item-by-width">アイテム(width)</div>
</div>
<div class="box">
<div class="item-by-basis">アイテム(basis)</div>
</div>