(0911)flex 의 유래 및 기본개념(생활코딩 flex 강의 정리)

flex는 layout 을 code로 표현하기 위해 고안되었다

flex의 유래 - layout 표현 방법의 변천사

table - layout 표현의 시작

가장 먼저 table tag 가 사용되었다
table은 격자모양으로 contents를 배치할 수 있었다

table 의 한계

table tag는 원래 표이므로 정보를 조직화하려는 목적이 있다
검색엔진 입장에서는 table tag 를 발견했을 때
layout 목적인지 정보 조직화 목적인지 분별하기 쉽지 않았다

POSITION - css property

이러한 table의 한계를 극복하기 위해
각 tag 별로 위치를 지정할 수 있는 position 속성을 사용했다

지금도 사용하는 괜찮은 방법 중 하나이다

float - css property

다른 속성으로는 float이 있다
이 또한 괜찮은 방법이다 말그대로 흘러가게 하는 것
이미지가 있으면 그 옆으로 text가 흐르도록 만드는 것이다

flex의 등장 및 기본개념

flex는 사용하기 위해 반드시 2가지 구성요소가 필요하다

• container
• item

각 구성요소는 html tag로 어떠한 tag도 될 수 있다
각 tag에게 부여해야하는 속성이 다르다

container property

container는 item을 감싸는 부모 tag이다
부모 tag에게 부여하는 기본적인 속성은 아래 2가지이다

display: flex

반드시 container 구성요소에 해당하는 tag에게
display: flex 를 할당해야 한다
그래야만 item 들이 flex에 의해 layout 의 적용을 받는다

flex-direction

flex 가 적용되어 item이 정렬되는 방향을 결정한다
value 는 2가지가 있다(reverse까지 총 4가지)

• column: item들이 수직으로 배열
• row: item들이 수평으로 배열

item property

item은 container의 자식 tag이다
자식 tag에게 부여할 수 있는 속성은 여러가지이다
여기서는 기본적인 몇가지만 살펴보자

basis

flex-basis 라고 쓰며 해당 item의 기본 넓이를 지정할 수 있다

grow

flex-grow 라고 쓰며 해당 item이 container
즉, 부모 tag에서 차지하는 비율을 정할 수 있다

기본값은 0이므로 container에서 차지하는 비율이 없다
값을 할당하면 container 안에서 해당 item이 차지하는 비율을 정할 수 있다

shrink

grow와 같은 효과이지만
화면크기가 작아지더라도 값을 유지하게 해주는 특성이다

item이 flex-basis 값을 가지고 있을 때,
화면크기가 basis 값보다 작아지면 item 크기도 작아진다

하지만 flex-shrink 를 지정하면
해당 item은 grow와 같이 동작하며
화면크기가 작아져도 그대로 grow로 인한 넓이가 유지된다

flex usage - holy grail layout(header, nav, main, ad, footer)