出典:YouTube DREAMコードflexbox

flexbox

flexbox? アイテムは行または列で自由に手配できます.
float:flexbox以前によく使われていました.イメージとtextの配置方法を定義します.
ex) float : left ; float : center
**
▼▼flexboxの2つの特徴
1.container/item属性値が存在します.
2.中心軸(主軸)と反対軸(十字軸)があります.

container/item属性値

flexboxには、コンテナに適用可能な属性値と、アイテムに適用可能な属性値があります.

コンテナ属性値ex)display、flex-direction、flex-wrap、flex-flow、previty-content、align-items、align-content

item属性値ex)order、flex-grow、flex-shill、flex、algin-sel

コンテナ属性値

▪️ flex-direction

flexの方向が横(行、行)か縦(列、列)かを決定します.デフォルト:row

▪️ flex-wrap

wrap:プロジェクトが1行いっぱいになると、自動的に次の行にジャンプします.flex-wrapデフォルト:nowrap

.container{
	display : flex;
    flex-direction : row;
    flex-wrap : wrap;}
    
.container{
	display : flex;
    flex-direction : row-reverse;
    }    
    
    

row-reverse:行ごとに並べ、アイテムの順序を逆に並べます.

▪️ flex-flow

flex-directionとflex-wrapの組み合わせ

.container{ 
	flex-flow : row nowrap;}

▪️ justify-content

中心軸(mainaxis)にitemがどのように配置されるかを表示します.デフォルト:flex-start

justify-content: flex-end;

上のコードでitemを右側に置きます.

flex-direction : column;
justify-content: flex-end;

上のコードでitemを下部に配置します.

jusify-contentは、アイテムの順序を変更しません.逆の順番だけ変えて!

justify-content : center; -> item 가운데 정렬
justify-content : space-around; -> item 사이 양 옆 공간을 준다. 
justify-content : space-evenly; -> item 모든 사이 공간이 같다.
justify-content : space-between; -> 가장 끝 item들은 공간이 없다.

▪️ align-items

反対軸に項目を配置します.
ex)

align-items : center;---> 반대축(열)의 가운데에 배치
align-items : baseline;----> item 모두 균등하게 배치

▪️ align-content

軸の項目を指定します.

align-content : space-between;
align-content : center;
align-content : space-evenly;

item属性値

▪️ order

ソート可能なアイテム

.item{
	order : 1;}

▪️ flex-grow

容器に物を満たす.デフォルト:0

.item1{
	flex-grow:1}
.item2{
	flex-grow:1}
.item3{
	flex-grow:1}
    

▪️ flex-shrink

コンテナが徐々に小さくなり、itemがどれだけ減少するかを指定します.デフォルト:0

.item1{
	flex-shrink:2}
.item2{
	flex-shrink:1}
.item3{
	flex-shrink:1}
    

item 1は他のitemより2倍減少した.
=>flex-growおよびflex-shillは、コンテナのサイズが変化するにつれてitemがどれだけ減少し、どれだけ増加すべきかを定義します.

▪️ flex-basis

これはitemがどれだけの位置を占めるべきかを詳細に示すことができる.
デフォルト:auto

flex-basis : 70%

無条件に他の項目の70%を占めている.

▪️ align-self

item個でitemをソートします.容器から離れることができます.

.item1{
	align-self : center}
    

上の該当品だけが集中的に並べ替えられています.
参照)

単純タグの作成方法
ex)

 div.container>div.item.item${$}*10

tapキーを押して、次のように生成します.

<div class = container>
	<div class = "item item1">1</div>
    <div class = "item item2">2</div>
    .생략
    .
    .
    .
    .
    <div class = "item item10">10</div>
    
</div>
    

css-trickサイト:flexboxを覚えていないときに探すことができます!