Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-items」 flexアイテムの整列「align-self」 最後に Flexboxの基本「display: flex;」 まずは、div要素を配置した例を見てください。 「displa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
