並べ方（Flex・Grid・配置）

中の要素を横や縦に並べる Flexbox と Grid、そして要素をどこにそろえるかを決める Property Class（- で始まる、CSS の1つの性質を決めるクラス）をまとめたページです。すきま（-g・-cg・-rg）は 余白（padding・margin・gap） にあります。

Flexbox と Grid のきほん#

どちらも、親の箱に付けて、中の子どもたちの並べ方を決める CSS のしくみです。

• Flexbox（display: flex）：子を1列に並べます。横に並べるか縦に並べるか、入りきらないとき折り返すか、を決めます。並ぶ向きを「主軸」、それと直角の向きを「交差軸」と呼びます
• Grid（display: grid）：箱を表のようなマス目に分け、子をマスに置きます。列と行の数や幅を決められます

Lism では、l--flex（Flexbox で並べる） や l--grid（Grid で並べる） を親に付け、このページのクラスで細かく調整するのが基本です。表の「ブレイクポイント」の列に「対応」とあるものは、画面の幅で値を切り替えられます（画面の幅で切り替える（レスポンシブ））。

Flex のクラス#

「なし」の Shorthand は、決まった値のクラスがありません。-fxb のように値の無いクラスがあるものは、style="--fxb: 10em" のように変数で値を入れます。

-fxd:column で縦に並び、-fxd:row-reverse で横に逆順で並びます。-fxw:wrap を付けると、入りきらない子が次の行へ折り返します。

<div class="l--flex -g:10">
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">伸びる</div>
  <div class="-bd -p:10 -bgc:base-2">そのまま</div>
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">伸びる</div>
</div>

-fxg:1 を付けた子だけが、余った幅を分け合って広がります。

Grid のクラス#

-gc:1/-1 は「最初の列から最後の列まで」なので、その子が1行を横いっぱいに使います。-ga:1/1 は、子を全部同じマスに置いて重ねるときに使えます。subgrid は、親の Grid の列や行の線を、子の Grid でもそのまま使う指定です。

<div class="l--grid -g:10 -gtc" style="--gtc: repeat(2, 1fr)">
  <div class="-gc:1/-1 -bd -p:10 -bgc:base-2">A（横いっぱい）</div>
  <div class="-bd -p:10 -bgc:base-2">B</div>
  <div class="-bd -p:10 -bgc:base-2">C</div>
</div>

-gtc に値を入れるには、style="--gtc: repeat(2, 1fr)" のように変数を使います。repeat(2, 1fr) は「同じ幅の列を2つ」という意味です。

そろえ方と並び順（Places）#

align- で始まるものは交差軸（Flexbox を横に並べたときは縦）、justify- で始まるものは主軸（横に並べたときは横）のそろえ方です。place- は両方をまとめて決めます。Grid では、align- が縦、justify- が横です。

-items と -content の違いは、-items が「マスや行の中で、子をどこに置くか」、-content が「子のかたまり全体を、親の中でどこに置くか」です。between は、両端の子を端に付け、残りを均等に空けます（space-between）。

<div class="l--flex -jc:between -bd -p:10">
  <div class="-bd -p:10 -bgc:base-2">左</div>
  <div class="-bd -p:10 -bgc:base-2">右</div>
</div>

-order:-1 を付けた子は、HTML の順番に関係なく先頭に来ます。

<div class="l--flex -g:10">
  <div class="-bd -p:10 -bgc:base-2">1つめ</div>
  <div class="-bd -p:10 -bgc:base-2">2つめ</div>
  <div class="-order:-1 -bd -p:10 -bgc:base-2">3つめ（先頭へ）</div>
</div>

React・Astro で書く場合#

コンポーネントでは、クラスの - を取った名前を Props として渡します。

<Flex g="20" jc="between">
  <Lism fxg="1">Item</Lism>
</Flex>

<Grid g="20" gtc="repeat(2, 1fr)">
  <Lism gc="1/-1">Item A</Lism>
</Grid>

関連するページ#

• l--flex（Flexbox で並べる）
• l--grid（Grid で並べる）
• 余白（padding・margin・gap）：すきまの -g・-cg・-rg
• 表示・はみ出し・位置：-d:flex・-d:grid