200519,25学習記録：CSSを使ったレイアウト②－２ フレックスボックス/CSSグリッド

Mana本

フレックスボックス

divで親要素、子要素を作る。親要素のCSSにdisplay:flex;のプロパティをあてる。
下は390PXの親要素のボックスの中に120pxの子要素のボックスを入れて、横並びにしている。

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

.container{
  display:flex;
  width:390px;
  border-width:thick;
  border-style:solid;
}

.item{
  width:100px;
  height:100px;
  margin:5px;
  padding:10px;
  background:#000;
  color:#fff;
}

親ボックス内の子ボックスの位置

〇display:flexを使った場合、子ボックスは横並びになる。
この状態を「主軸は横」「交差軸は縦」と言う。

主軸つまり横方向の位置の設定はjustify-contentプロパティを使う。
交差軸つまり縦方向の位置の設定はalign-itemsプロパティを使う。

〇display:flexを使ってフレックスボックスにしたのちに
flex-direction:columnで横並びに戻した
この状態を「主軸は縦」「交差軸は横」と言う。

主軸つまり横方向の位置の設定はalign-itemsプロパティを使う。
交差軸つまり縦方向の位置の設定はjustify-contentプロパティを使う。

つまりこういうことね。

.page-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:190px;
  height:190px;
  padding:5px;
  background:#9334;
}

でもこれなんのためにやっているのかよくわからんので、通常はメディアクエリを使った場合。
例えば↓で子要素を横並びにした

.page-header{
  display:flex;
  justify-content: space-between;
}

それをメディアクエリで560px以下の場合は、子要素を縦並びにして中央揃えにすると

@media(max-width:560px){
  flex-direction:column;
  align-items:center;
}

とこんな感じ。
通常はjustify-contentで横並びの均等配置
560px以下の場合はalign-itemsで縦並びの中央揃い

CSSグリッド

divで親要素、子要素を作る。親要素のCSSにdisplay:gird;のプロパティをあてる。
grid-template-columnsのプロパティで子要素の一列の数とサイズを指定。
下は640PXの親要素のボックスの中に200pxの子要素のボックスを入れて、1列3つで横並びにしている。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container{
  display:grid;
  grid-template-columns:200px 200px 200px;
  gap:10px;
  padding:10px;
  width:620px;
  border-width:thick;
  border-style:solid;
}

.item{
  padding:10px;
  background:#000;
  color:#fff;
}