Flexbox

これは符号化されていないCSS Layoutのメイン教室を聞いたことについての総括的な文章です.

Flex container

flex container

1.flexコンテナを使用してflex childrenの位置を変更する
2.display:Flexを使用してFlexコンテナを作成する

    <div class="box-wrapper"> /*flex container*/
        <div class="box">1</div> /*flex child*/
        <div class="box">2</div> /*flex child*/
        <div class="box">3</div> /*flex child*/
    </div>

.box-wrapper { /*flex container*/
  display: flex;

}

.box { /*flex children*/
  background: blue;
  width: 300px;
  height: 300px;
  display: inline-block;
  color: white;
}

flex direction

flex direction

1. row (default) :
水平軸(水平):主軸
垂直軸(垂直):crossaxis
2. column :
水平軸(水平):crossaxis
垂直軸(垂直):mainaxis
3.注意
flex容器は横移動するのに十分な高さが必要です

justify-content & align-items

flex child移動の指定
(デフォルトflex direction:rowベース)
1. justify-content
:mainaxisでflex childの移動を指定する

2. align-items
:crossaxisでflex childの移動を指定する

align-self & order

align self
flexコンテナを使用せずにflexサブロケーションを直接変更します.
align-sselfとalign-itemの同時十字軸方向の動き

order

HTMLでは順序変更が難しい
order 0はdefault

    <div class="box-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

.box-wrapper {
  display: flex;
  flex-direction: row; /*default : 가로(main axis) & 세로 (cross axis)*/
  /*Main axis*/
  justify-content: space-around;
  font-size: 50px;
  height: 100vh;
}
.box:nth-child(1) {
  align-self: flex-start; /*자식에서 위치 직접 이동*/
  order: 2;
}
.box:nth-child(2) {
  align-self: center; /*자식에서 위치 직접 이동*/
  order: 1;
}
.box:nth-child(3) {
  align-self: flex-end; /*자식에서 위치 직접 이동*/
  order: 0; /*default 값*/
}
.box {
  background: blue;
  width: 300px;
  height: 300px;
  display: inline-block;
  color: white;
}

flex containerとflex childの両方に表示されます:flexはテキストを中心にします

flex-wrap

flex-wrap
指定した幅で直接ソートするのではなく、1行でソートすることを優先します.

nowrap:すべてのchildを1行揃えます
wrap:指定したサブサイズ(複数行)を揃えます.
wrap-reverse:childを下から上へ複数行に並べる

flex-direction

flex-direction
child要素の整列方向を指定する

row:デフォルト
row-reverse:右側からソート
column:上から下へ
column-reverse:下からソート

align-content

align-content
複数行の間隔を調整するには、改行を使用します.

flex-grow

flex-grow
各flex childには、画面に余白を追加すると、対応するスペースを埋めるように展開されます.

flex-grow : 1 (default)
特定の個別値X->を設定します.

flex-shrink

flex-shrink
画面が小さくなりflex containerが狭くなるとflex childの動作定義
flex-wrap : nowrap
画面が小さくなり、幅が特定の値に設定されている場合でも、ローをリストします.
flex-shrink : 2
->複数のchildのうち、childの数だけで2倍に減少

flex-basis

flex-basis
収縮および成長前の初期寸法の指定
mainaxisはrowはwidth、columnはheight