見出し画像

簡単！ホームページを作ってみよう！ -4

donguri

もっと簡単にレイアウトをしましょう。CSSは進化していっているので便利なものがどんどん出てきます。

今回はFlexboxを使って見ましょう。

定番のサイトですがわかりにくいので以下が参考になると思います。


親子の要素がある場合、たとえば、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>

<div class="fl">
  
  <div class="item"> Item　 </div>
  <div class="item"> Item　 </div>
  <div class="item"> Item　 </div>
  <div class="item"> Item 　</div>
  
</div>
  
</body>
</html>

表示は

縦並びになっています。

<div class="fl">　　・・・　親

<div class="item"> Item　 </div>　　・・・　子
<div class="item"> Item　 </div>　　・・・　子
<div class="item"> Item　 </div>　　・・・　子
<div class="item"> Item 　</div>　　・・・　子

のように親子関係がある場合

.fl{
display: flex;
}

と親要素のclassにdisplay: flex;と親要素を指定するのみで子の要素に適応され横並びに並びます。

親子をしっかりと把握してつけるべき方につけないとうまく表示されないことがあります。これが一番大事で、ここを外すとややこしくなり理解が進みません。以下参考サイトより抜粋です。

親要素

  • flex-direction：flexアイテムの並び方を指定する

  • flex-wrap：flexアイテムの折り返しを指定する

  • flex-flow：flexアイテムの並び方と折り返しを指定する

  • justify-content： flexアイテムの横の配置を指定する

  • align-items：flexアイテムの高さを揃える

  • align-content：flexアイテムの縦の配置を指定する

子要素

  • order：flexアイテムの表示順を指定する

  • flex-grow：flexアイテムの伸び率を指定する

  • flex-shrink：flexアイテムの縮み率を指定する

  • flex-basis：flexアイテムの基準の大きさを指定する

  • flex：flexアイテムの基準の大きさと伸縮率を指定する

  • align-self：flexアイテムの縦の配置を個別に指定する

  • gap：flexアイテム同士の余白を指定する


この記事が気に入ったらサポートをしてみませんか？