Flex Boxクリア

#Flexとは何ですか?
つまり、Flexはレイアウト構成専用機能です.
#親プロパティ、子プロパティ?

<div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

Flexのプロパティは次のとおりです.

の親に適用される属性

子供の特性に適用
このように2種類に分けられます.

1.親の属性に適用
(1) display: flex; (宣言)

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

.box {
  border: 1px solid green;
  padding: 10px;
}

デフォルト値は

で、display:flexが適用する親ボックスのサブ要素は左から右に順に配置されます.

(2)flex-direction(配置方向の設定)

#outer {
       flex-direction: row;// 기본값//
	   flex-direction: column; 
	   flex-direction: row-reverse; 
	   flex-direction: column-reverse; 
}

(3)flex-wrap(改行処理)

ウィンドウを減らすか、改行しないとウィンドウが小さくなり、下向きになりません.

#outer {
       flex-wrap: norap; //기본값//
       flex-wrap: wrap;
       flex-wrap: wrap-reverse;
}

(4)flex-flow(flex-directionとflex-wrapのショートカット属性を同時に指定できます)

#outer {
     flex-flow: row wrap;
}

(5)rivide-content(中心軸にアイテムを配置する方法を指定)

flex-方向の中心軸が行(水平)の場合は、水平方向に整列します.

#outer {
       justify-content: flex-start;// 기본값//
	   justify-content: flex-end; 
	   justify-content: center; 
	   justify-content: space-around;
       justify-content: space-evenly;
       justify-content: space-between;
}

flex-start

flex-end

center

スペースアーム(boxにスペースを置く)
1箱

周辺空間をつくる

space evenly

すべての箱には統一された空間があります.

space between

左右両側が密着して空間を形成しています.

(6)align-items(交差軸にアイテムを配置する方法を指定)

flex-方向の中心軸が行(水平)の場合は垂直に整列します.

#outer {
       align-items: flex-start;// 기본값//
	   align-items: flex-end; 
	   align-items: center; 
	   align-items: stretch;       
}

center(水平方向中央揃え)

(7) align-content

flex-wrapがwrapの場合、流出した箱を揃えます.

prevident-コンテンツのプロパティはすべて使用できます.

space-between
上下に箱が貼られていて、真ん中にスペースがあります.

2.子に適用される属性
(1)flex-basic(flex-basic Flexプロジェクトのデフォルトサイズ設定)

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

元の幅が100 px未満のAとCは100 pxに増加し、元の100 pxを超えるBは変わらない.

.item {
	flex-basis: 100px;
}    

とは逆にwidthを設定すると、100 pxを超えるBも100 pxに調整されます.

.item {
	width: 100px;
}    

両方が

に設定場合

.item {
	flex-basis: 100px;
    width: 100px;
}    

(2)flex-grow(flex-grow)は、プロジェクトがflex-basesの値より大きいかどうかを決定する属性です.)
flex-growには、数値値が含まれています.いくらであれ、0より大きい値を設定すると、プロジェクトは元のサイズよりも柔軟な(Flexible)ボックスになり、空白を埋めます.
既定値は0なので、単独で適用するまでアイテムは追加されません.

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

(3)flex-shill(flex-shillはflex-growとペアをなす属性であり、プロジェクトがflex-basicの値より小さいかどうかを決定するために使用される).
growとは逆に、shriftのボックスサイズは設定したパーセントで減少します.
ただし、flex-growプロパティとflex-schripプロパティを併用することは推奨されません.(競合が発生する可能性があります)