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

Question

前提・実現したいこと

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

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

該当のソースコード

    <ul>
      <li>ああああ</li>
      <li>いいいい</li>
      <li>うううう</li>
      <li>ええええ</li>
      <li>おおおお</li>
    </ul>

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  background: pink;
}

li {
  list-style: none;
  margin: 10px;
  background: skyblue;
}

試したこと

▼liにwidthを指定
変化なし

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

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

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

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

Answer 1

ul {
  display: flex;
  justify-content: safe center;
}

ul > li {
  flex: none;
}

オーバーフロー時のレイアウトについては 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 の指定でいいのではないでしょうか？

ul {
  text-align: center;
  white-space: nowrap;
}

ul > li {
  display: inline-block;
}

Comments

[_sz]

x_x さん

ご回答ありがとうございます！
どちらの方法も思い通りの結果となりました！

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

[x_x]

名前違いますよ……

[_sz]

x_xさん

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

Answer 2

可能です

• CSS flexible box の利用
• CSS Flexbox の各プロパティの使い方を詳しく解説

ul{
  flex-wrap: wrap
}
li{
  flex: 0 0 auto;
}

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

• flexboxで固定＋リキッドレイアウト
• Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
• floatより辛くない「flexbox」でざっくりレイアウト
• 固定幅と可変幅の組み合わせにはflex-basisが まったく カン・タン・だ！

Comments

[_sz]

liveAsNotes さん

ご回答ありがとうございます！
このような指定方法があるのですね…大変勉強になりました…！

liの幅についてはこれで無事解決できたのですが、flex系の指定で「ウィンドウを狭めても、liの横並びを維持し（１行のまま２行にならない）、liの幅も維持する」ことは可能でしょうか…？

liの親要素にmin-widthを指定すれば実現できるのですが、何かflex系の指定でもできるのだろうか、と思いまして…
何かご存知でしたら、教えていただけますと幸いです。

[liveasnotes]

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]

ちなみに，親要素の上下左右中央寄せは，以下のコードでできます

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

尚，親要素の親要素に，
position: relative;の指定が必要です

[_sz]

liveAsNotes さん

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