【CSS】flexboxレイアウトについて

flexboxを使用する際には親要素にdisplay: flexを指定する。

.main {
  display: flex;
}
目次

justify-content

横方向の位置の調整には、justify-contentを使用します。

  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
.wrapper {
    justify-content: flex-start;
    justify-content: flex-end;    
    justify-content: center;
    justify-content: space-around;
    justify-content: space-between;
}

align-items

縦方向の位置の調整には、align-itemsを使用します。

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
.wrapper {
  align-items: stretch;
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}

flex-wrap

通常flexboxは要素の中にできるだけ入るようにしますが、折り返したりする場合にはflex-wrapを使用します。

  • nowrap: 初期値
  • wrap: 折り返し
  • wrap-reverse: 逆に折り返し
.wrapper {
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

flex-direction

方向についてです。rowcolumnかをflex-directionを指定します。

  • row
  • row-reverse
  • column
  • column-reverse
.wrapper {
  flex-direction: row;
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;
}

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる