レイアウトを組む

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインを勉強中。

レイアウトとはコンテンツをどこに、どう配置するか設計すること。 (P152)

Flexbox

複雑なレイアウトも簡単に組める。Flexコンテナーとなる親要素の中に、Flexアイテムと呼ばれる子要素を入れる。

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <!-- <span>css display flex inline-flex</span> -->
</body>

.item クラスが付与されている div タグの親要素である div タグの .container クラスに対し display: flex を追加する(P153)。

.container {
  display: flex;
  /* display: inline-flex; */
}
.item {
  background-color: #0bd;
  margin: 10px;
}

これで横並びを実現できる。

VSCodeを使っていると display プロパティに対し値候補として inline-flex が表示される。このスタイルを確認するために span タグのコメントを外し、 display: inline-flex; を有効にしてみた。

予想通り div タグが inline 扱いとなり、表示領域の応じて「Item」に回り込んだり、狭くなった場合は、下に落ちた。

子要素の並びを制御する

flex-diection で子要素をどの方向に配置するか指定する。 (P153)

値	説明
row(初期値)	左から右
row-reverse	右から左
column	上から下
column-reverse	下から上

@charset "UTF-8";
.container {
  display: flex;
  flex-direction: row;
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
  /* display: inline-flex; */
}
.item {
  background-color: #0bd;
  margin: 10px;  /* 背景を余白をスタイリング */
  height: 60px;  /* 背景を正方形にスタイリング */
  width: 60px;  /* 背景を正方形にスタイリング */
  text-align: center; /* 文字を左右中央揃えにスタイリング */
  line-height: 60px; /* 文字を上限中央揃えにスタイリング */
}

flex-direction のコメント有効・無効を切り替えればスタイルの変化を確認可能だ。

子要素の折返し

felx-wrap プロパティで子要素を複数行に並べるかどうかを指定する。 (P154)

値	説明
nowarap(初期値)	折り返しなし
wrap	上から下に複数行に並べる
wrap-reverse	下から上複数行に並べる

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}

CSS怖い。 flex-wrap: nowrap を指定してついに「CSS怖い」病が発症した。ブラウザの表示幅に収まらないほど div タグを追加していくと突然レイアウトが崩れます。

理由はわかりません。レイアウトが崩れたのを気にせずさらに div タグを追加する。横スクロールバーが出現しました。横スクロールバーを出現させられるなら、レイアウトを崩さずに描画すればいいでしょ！

@charset "UTF-8";
.container {
  display: inline-flex; /* これも効果なし */
  flex-wrap: nowrap;
}
.item {
  flex: 1 90px;
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}

CSS怖い！

できた!

.container {
  display: inline-flex;
}
.item {
  flex-wrap: nowrap;  /* flex-wrapをflexアイテムに記述 */
  background-color: #0bd;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  padding: 0 10px;
}

水平方向の揃え

justify-content プロパティで子要素を水平方向のどの位置に配置するか指定する。 (P155)

flexコンテナーにこのプロパティを記述する。

flex-start : 行頭からの左揃え(初期値) 'flex-end: 行末から配置の右揃えcenter: 中央揃えspace-between: 最初と最後の子要素を両端揃え、残りの要素は均等配置space-around` : 全子要素を均等配置

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* justify-content: space-evenly; */
}
.item {
  background-color: #0bd;
  color: #fff;
  width: 80px;
  margin: 10px;
  padding: 10px;
}

垂直方向の揃え

align-item プロパティで子要素を垂直方向のどの位置に配置するか指定する。 (P156)

stretch : 親要素の高さ、または一番多い子要素の高さに合わせ配置 flex-start : 親要素の開始位置から上揃え felx-end : 親要素の終点位置から下揃え center : 中央揃え baseline : ベースライン揃え

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item case1">Item 2</div>
        <div class="item case2">Item 3</div>
        <div class="item">Item 4</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  align-items: stretch;
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
  height: 100vh;
}
.item {
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}
.case1 {
  padding-top: 40px;
}
.case2 {
  padding-bottom: 40px;
}