flex의 기본

- 우선 flex의 큰틀을 하나 잡고가자

 

 container                       item

display                           order

flex-direction                  flex-grow

flex-wrap                               flex-shrink

flex-flow                          flex-basis

justify-content                   flex

align-items                           align-self

align-content                                       

 

 

- flex를 썼을때와 안썼을때 어떤 변화를 가져오는지 차이를 먼저 살펴보자

안썼을경우의 예로 주석처리가 되어있다

flex를 썼을경우 

- row(열) / column(행) / row-reverse / column-reverse

먼저 row를 살펴보자. flex의 기본값은 row(열)이다

나는 열을 세로라고 정의했다 사진을보자

flex-direction 이 추가된것을 볼 수 있다

flex-direction: row  를 줬는데 아무일도 일어나지 않는다

당연한결과이다 위에서 말했듯 원래 flex의 기본값은 row이기 때문이다

 

 

다음 column(행)을 살펴보자.

처음 봤던것처럼 다시 가로줄로 돌아올것이다

flex, flex-direction을 아무것도 주지않았을때의 형태와 같음

다음 row-reverse이다

뜻을 대강 파악해보면 거꾸로 뒤집겠구나 예측해볼수있다

숫자가 뒤바뀌면서 위치도 바뀐걸 볼 수 있다

다음 column-reverse이다

그렇다면 이건 가로줄이 반대로 뒤집히겠구나 예측해볼수있다

예상대로 column(가로줄)에서 뒤집혔다

 

- flex-grow

사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.

첫 항목의 flex-grow 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 flex-grow 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 flex-grow 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.

: mdn참조 

 

하나는 flex-grow: 2를 주고, 나머지는 다 1을 줬다

남는공간을 알맞게 분배한다고 생각하면 될 것 같다

2를 준 경우 , 1을 준 경우 이거는 어떻게 생각하면 편할까?

 

총 5개의 칸이 있었는데 하나를 2로 줬으니까 총 6칸이라 생각하고

1을 준것을 6분의 1씩 공간을 가지고 ,

2를 준것은 6분의 2로 공간을 차지한다고 생각하면 편할것같다

 

 

 

Resource : https://opentutorials.org/course/2418/13526