CSS display: flex; の子要素の幅を固定したい

前提・実現したいこと

初めてここで質問をさせていただきます。

ul に display: flex; を指定し、li を横並びにしました。
ウィンドウの幅を狭めても、liの幅が変わらないようにすることは可能でしょうか…？

該当のソースコード

HTML
1    <ul>
2      <li>ああああ</li>
3      <li>いいいい</li>
4      <li>うううう</li>
5      <li>ええええ</li>
6      <li>おおおお</li>
7    </ul>

CSS
1ul {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  background: pink;
6}
7
8li {
9  list-style: none;
10  margin: 10px;
11  background: skyblue;
12}
13

試したこと

▼liにwidthを指定
変化なし

▼liにmin-width: 100px;を指定
ウィンドウ幅を狭めた際に、以下の現象が見受けられました。

・一番左のliが、ウィンドウの外にはみ出る
・右にスクロールすると、一番右のliがulの背景からはみ出ている

補足情報（FW/ツールのバージョンなど）

Windows10　バージョン1803
Google Chrome　バージョン: 68.0.3440.106

行動規範の内容に同意します

回答2件

CSS
1ul {
2  display: flex;
3  justify-content: safe center;
4}
5
6ul > li {
7  flex: none;
8}

オーバーフロー時のレイアウトについては CSS Box Alignment Module Level 3 で safe キーワードが定義されていますが、まだ草案段階で各ブラウザも指定通りに動かないようです。
https://drafts.csswg.org/css-align-3/#overflow-values
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

しかし、今回の場合はフレックスボックスにこだわらなくても inline-block の指定でいいのではないでしょうか？

CSS
1ul {
2  text-align: center;
3  white-space: nowrap;
4}
5
6ul > li {
7  display: inline-block;
8}

投稿2018/08/15 05:00

x_x

総合スコア13749

_sz

2018/09/12 15:50 編集

x_x さんご回答ありがとうございます！どちらの方法も思い通りの結果となりました！「フレックスボックスで横並びは簡単にできる」と小耳に挟んだので、今回は少しこだわってしまいました。でも、適宜自分の楽な方法で指定した方が良いのかもしれませんね。ありがとうございました！

x_x

2018/08/27 00:23

名前違いますよ……

_sz

2018/09/12 15:50

x_xさん大変申し訳ございませんでした！！

行動規範の内容に同意します

ベストアンサー

可能です

css
1ul{
2  flex-wrap: wrap
3}
4li{
5  flex: 0 0 auto;
6}

の指定を追加してみてください

投稿2018/08/14 16:42

liveasnotes

総合スコア1284

_sz

2018/08/15 02:56

liveAsNotes さんご回答ありがとうございます！このような指定方法があるのですね…大変勉強になりました…！ liの幅についてはこれで無事解決できたのですが、flex系の指定で「ウィンドウを狭めても、liの横並びを維持し（１行のまま２行にならない）、liの幅も維持する」ことは可能でしょうか…？ liの親要素にmin-widthを指定すれば実現できるのですが、何かflex系の指定でもできるのだろうか、と思いまして… 何かご存知でしたら、教えていただけますと幸いです。

liveasnotes

2018/08/15 04:10

flex-wrap: nowrap;が親要素の初期値なので，flex-wrapの指定を外せば，1行になります．子要素の幅固定に関しては， liに既に幅指定をしている場合は，li{flex: 0 0 auto;} liに幅指定をしていない場合は，li{flex: 0 0 100px;} のようにすれば良かったと思います内容からして，左右中央寄せをしたいのかと思われますが， cssで解決する場合，どうしても親要素のcssを指定することになります（子要素のcssを指定する場合，条件が限られるなど，若干汎用性に欠けるからです．もちろん，使いどころによっては子要素のcssだけを編集したほうが良い場合もあるでしょう min-widthの指定は，予期しない動作を防ぐ保険として残しておいてください max-width: 90vw;（ビューポートの90%を最大幅に指定）等の併記もおすすめしますそれからもし，親要素内の左右に余白を付けるかたちで，中央寄せしたいなら，「calc()」を使うのはどうでしょうか親要素に「padding: 0 calc(50% - 300px);」という感じで指定します（300pxは，幅100pxのli要素が6つ並ぶものと仮定した際の値です） paddingはショートハンドで，「padding: /*上下余白*/ /*左右余白*/;」と書けますまた，calc()で，親要素自身の横幅の50%から，内包要素の全体の横幅の半分を引けば，余白ができます marginと違い，paddingは負の値が無効になるので，「0~全体幅の半分」が値の範囲になります尚，box-sizingの指定がcontentの場合，若干位置がずれることがあります適宜調整してください各プロパティの詳細は，MDNなどの公式ドキュメントを参照してください「プロパティ名　MDN」などで検索すればダイレクトに見れます

liveasnotes

2018/08/15 04:12

ちなみに，親要素の上下左右中央寄せは，以下のコードでできます position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 尚，親要素の親要素に， position: relative;の指定が必要です

_sz

2018/08/18 03:36

liveAsNotes さんご回答ありがとうございます！ ulのflex-wrap: wrap;を外したところ、思い通りの結果になりました！他にも様々な指定方法があるのですね。 calc()やposition: absolute;の中央寄せなども、今後使ってみようと思います。ありがとうございました！

行動規範の内容に同意します

あなたの回答