플렉스 박스 레이아웃

플렉스 박스 레이아웃과 기본 속성들

플렉스 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것

플렉스 컨테이너 : 컨테이너

플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소

주축 : 플렉스 항목을 배치하는 기본 방향(기본은 왼->오, 수평방향;  주축 시작점, 주축 끝점)

교차축 : 주축과 교차되는 방향(기본은 위->아래;  교차축 시작점, 교차축 끝점)

display : flex | inline-flex

.wrapper{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flexx;
    display:flex;
}

flex-direction 속성 - 플렉스 방향 지정하기

flex-direction : row(기본값, 주축 가로(왼->오) | row-inverse | column(주축 세로(위->아래) | column-inverse

 

flex-wrap 속성 - 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

flex-wrap : no-wrap(한줄) | wrap(여러줄) | wrap-reverse(여러줄, 반대방향)

이거 화면크기 줄여보면 알아. 크기보다 작아지면 밑에줄로 가는 식으로

 

flex-flow 속성 - 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기

flex-flow : <플렉스 방향> <플렉스 줄 배치>

 

order 속성 - 플렉스 항목의 배치 순서 바꾸기

order : 0(순서대로) | 숫자

item 1,2,3이 있는데 2에 1, 1에 2, 3에 3을 넣으면 2,1,3순서로 나와

 

flex 속성 - 플렉스 항목 크기 조절하기''

flex : [<flex-grow>(늘릴지) <flex-shrink>(줄일지) <flex-basis>(기본 크기)] |

       auto(항목의 width/height 값에 의해 크기가 결정) |  initial('', 공간 부족하면 최소 크기까지 줄임(기본값)]

]

 

grow : 여백의 비율

1 : 2 : 1이면 여백을 1:2:1로 나눠서 width에 더한다.

진짜 크기를 1:2:1로 하고 싶으면 item에 flex-basis:0으로 놓고 nth child마다 1 : 2: 1로 나누면 된다.

grow는 크기 키울때 적용. shrink는 줄일때 적용

그런데 flex:1 flex:2 flex:3 이런식으로 하면 둘다 적용돼. flex-basis는 자동으로 0으로돼

flex를 2개 item에서 하나만 적용하고 하나에는 width 고정된 크기 주면 나머지 하나 크기가 화면 키우고 줄일때마다 바껴

플렉스 박스 항목 배치를 위한 속성들

justify-content 속성 - 주축 기준의 배치 방법 지정하기

justify-content : flex-start(시작점 기준) | flex-end(끝점기준) | center(중앙기준) |

                     space-between(첫번째, 마지막은 시작, 끝점 중앙은 같은 간격) | space-around(모두 같은 간격)

     justify-items : 각각 아이템마다 적용

     justify-self : 아이템 하나에 적용하는거

 

 

align-content 속성 - 여러 줄일 때의 배치 방법 지정하기(flex-wrap이 wrap일때)

align-content : flex-start | flex-end | center | space-between | space-around  (justify-content랑 속성 같아)

 

    align-items 속성, align-self 속성 - 교차축 기준의 배치 방법 지정하기

    align-items : stretch(교차축을 꽉 채움, 기본값) | flex-start | flex-end | center |

    baseline(시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치, 그 글자의 기준선과 다른 항목의 기준선을        맞추어 배치)

    align-self(개별적 배치) : auto | stretch | flex-start | flex-end | center | baseline