[CSS] Box - Flex

Flex

flex cssプロパティは、ビューまたは要素のサイズが不明確または動的に変化した場合に、要素を効率的に配置およびソートする方法を提供するレイアウトです.
その大きな利点は、複雑な計算を必要とせずに要素のサイズと順序を柔軟に手配できることです.

もっと大きくしたい4 step!

①flex box宣言

ソートしたい要素を持つ부모요소にdisplay:flex;を発表しました.

.flexbox {
 display: flex;
 /* flex | inline-flex */
}

②水平または垂直を選択

.flexbox {
 display: flex;
 flex-direction: row;
 /* row | row-reverse | column | column-reverse */
}

ソース:WEBビット:CSS Flexプロパティ

③元素を1行に入れますか？何行にしますか。

.flexbox {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 /* nowrap(기본값) | wrap */
}

(1)nowrap:包みません.子供のサイズを小さくしても、一列に並びます.

/* 부모요소 */
.flex-container {
 width: 500px;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}
/* 자식요소 */
.flex-items {
 width: 200px;
}

(2)wrap:1行に整列可能なスペースがない場合は、次の行(複数行)に移動します.

/* 부모요소 */
.flex-container {
 width: 500px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
/* 자식요소 */
.flex-items {
 width: 200px;
}

④flex boxを使う

(1)Main Axisの場合はidentify-content

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 1000px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  /* flex-start | flex-end | center | space-between | space-around */
}

(2)Cross axisの場合align-itmes,align-contentを用いる
ストライプの違い
1)align-itmesの場合

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 600px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

2)align-コンテンツの場合
align-contentを使用する場合はflex-wrap: wrap;です.

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 600px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

order

flexソートの要素の順序を指定することで、位置を変更できます.

.flex1 {
  background-color: red;
  order: 3;
}
.flex2 {
  background-color: yellow;
  order: 1;
}
.flex3 {
  background-color: blue;
  order: 2;
}