[CSS] flex 공부

지금까지 flex를 이용하여 여러 레이아웃을 짜긴 했지만, 아직은 부족한 부분이 있기 때문에

드림코딩 엘리님 강의를 보며 한번 더 정리하는 시간을 가져야겠다.

 

일단 flex는 컨테이너에 적용할 수 있는 속성과 item에 적용할 수 있는 속성으로 나뉜다.

flex를 사용하려면 일단 둘러싸고 있는 container에 display: flex;를 지정해주어야 한다.

 

 

컨테이너에 지정하는 속성

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

아이템에 지정하는 속성

• order
• flex-grow
• flex-shrink
• flex
• align-self

 

컨테이너 속성

1. display: flex & flex-direction

컨테이너에 display: flex를 지정하면 블럭요소였던 <p>가 가로로 한 줄로 정리된다.

만약 가로가 아닌 세로로 정렬시키고 싶으면 flex-direction을 이용하면 된다.

 

 

 

flex-direction에는 row / row-reverse / column / column-reverse 총 4개의 속성을 지정해 줄 수 있는데

row/column은 각각 가로/세로 정렬이고 reverse는 말 그대로 아이템요소들을 반대 방향으로 정렬해 준다.

 

 

 

2. flex-wrap

flex-wrap 속성은 wrap과 nowrap 속성이 있는데, 위와 같이 wrap으로 지정해 주면 아이템들의 요소가 많아 컨테이너를 꽉 차게 되면 자동으로 다음 줄로 넘어가게 된다. (wrap에도 wrap-reverse와 같은 속성이 있다)

반면 nowrap으로 지정해 주면

자동으로 크기가 작아져서 한 줄로 유지되는 모습을 볼 수 있다

flex의 기본값은 nowrap이다.

 

 

 

3.flex-flow

flex-direction과 flex-wrap은 flex-flow로 축약시켜 쓸 수 있다

 

 

4. justify-content

아이템들을 어떻게 배치할 것인지 지정해 주는 속성

start / flex-start/ center / end / flex-end / left / right / space-between / space-around / space-evenly 가 있다

(start/end와 flex-start/start-end 가 서로 어떻게 다른 건지 모르겠다... https://stackoverflow.com/questions/50919447/flexbox-flex-start-self-start-and-start-whats-the-difference)

 

space-around는 각 박스에다 같은 여백을 넣어주는 것이다

예를 들어 박스의 양 옆으로 50px씩 여백이 생긴다면, 첫 번째 아이템의 왼쪽과 마지막 아이템의 오른쪽 공간은 50px의 여백이 생기지만 두 박스가 서로 닿아있는 공간은 50px + 50px = 100px의 여백이 생긴다.

 

반면, space-evenly는 모두 같은 여백이 생기게 한다.

일정한 간격이 생기는 것을 볼 수 있다.

 

space-between는 첫 번째 아이템과 마지막 아이템이 컨테이너의 끝으로 배치되고, 그 사이에서 모두 같은 여백이 생기게 한다

 

 

 

5.align-items

align-items은 메인축으로부터 수직이 되는 방향으로 어떻게 아이템들을 배치해 줄지 정해주는 속성이다.

flex-start / flex-end / center / baseline 이 있다

 

center는 수직방향으로 중심에 놓을 수 있다. (레이아웃 짤 때 가장 많이 사용했던 것 같다)

 

baseline은

글자 위치가 이렇게 다 제각각일 때,

같은 위치에 올 수 있도록 해 준다.

 

 

6. align-content

justify-content와 비슷하지만 반대축으로 정렬방법을 지정해 준다

 

 

이렇게 되어있던 거에 space-between을 지정해 주면 

이렇게 정렬된다.

justify-content와 유사하니 나머지 설명은 생략!!

 

 

 

 

아이템 속성

1. order

아이템의 순서를 지정해 준다.

위처럼 아이템들의 순서를 바꿀 수 있다.

잘 쓰게 되지는 않는 속성인 듯

 

2. flex-grow

컨테이너를 꽉 채우게 해주는 속성이고 입력해 준 수치에 따라 비율이 달라진다. (기본값 0)

 

3. flex-shrink

줄어들 때 어떤  비율로 작아질지를 지정해 준다

nowrap상태일 때 flex-shrink를 0으로 지정해 주면 지정해 준 사이즈로 유지시켜 준다.

컨테이너 사이즈가 줄어들었을 때 아이템 1에다가 지정해 준 flex-shrink: 0; 으로 인해 아이템 1만 크기가 본연의 사이즈로 유지되는 모습

 

4. flex-basis

좀 더 구체적으로 명시해 줄 수 있는 속성으로, 항상 몇 퍼센트를 차지할 건지를 명시해 줄 수 있다.

 

 

5.align-self

아이템별로 어디에 위치시킬 건지 지정해 줄 수 있다.