lex= 기본적으로 가로 정렬을 이용할 때 유용하다고 생각하라!
주의점
1. wrapper의 첫 번째 자식 외에 추가적인 자손들은 추가 상속 작용을 일으키지 않는다. 따라서 flex 역시 적용x
2. Justify -content의 경우, 기본 셋팅 값이 flex-start다. 이 경우 변화가 없다.
왜? 기본적으로 브라우저는 왼쪽 혹은 상단에 기준이 맞춰져 정렬되어 있기 때문.
3. 그런데 flex-end로 변경한다면?
보는 것처럼 오른쪽에 딱 맞춰서 정렬된다.
4. center로 맞추면 바로 중앙 정렬!
5. Justify-contents는 결국 가로 정렬의 기본적인 레이아웃 정렬 위치를 조정시키는 프로퍼티.
6. 이외에도 space- around, between, evenly가 있다.
1)space- around
좌우 마진이 똑같게 정렬.
2)space-between
좌우 마진이 사라지고, 아이템들 간의 영역만 띄워짐.
3)space-evenly
스페이스 어라운드는 좌우 마진 값을 동일하게 붙이는 것인 반면, 좌우에 벌어진 간격이 전부 동일하게 셋팅.
스페이스 비트윈을 가장 많이 사용.
<각 아이템의 사이즈를 다르게 설정할 경우?>
각 항목들이 결국 좌측과 상단으로 정렬된 것을 볼 수 있음. 이를 통해 flex는 default값이 좌측과 상단으로 설정되어 있는 것을 확인할 수 있다.
<속성에 따라 얼라인 변경하는 방법>
1)align-items 속성자 사용
1. Flex- start
2.flex-end
3.center
가운데 기준으로 센터 정렬을 할 수 있다. 과거에는 이 기능이 없어 구현이 힘들었지만, 플렉스가 이런 기능들을 용이하게 만들었다.
2)flex-direction
- Column
가로 정렬을 컬럼 단위로 세로 정렬 시켜줌.
- Row
로우는 플렉스의 디폴트값.
3. Row-reverse
- Column -reverse
Flex-direction을 컬럼으로 바꾸게 되면 여기서 우리가 조정한 얼라인, 저스티파이 콘텐트 들의 축들이 다 반대로 적용됨.
Align-items: center-> 세로 축이 정렬.
Justify-content는 스페이스 비트윈인데 간격이 없음?
- 이것은 지금 레퍼의 하이트가 짧아서 그런 것.
-> 이렇게 1000px로 바꾸면 간격이 생김.
But. 이런 세로 정렬은 마진이나 이런 것들로 사용가능하므로 잘 사용은 안함. Flex-direction은 크게 신경x.
이렇게 실전 적용을 했을 때 플렉스를 사용하면 레이아웃에 기존처럼 마진이나 포지션 등을 통해 설정할 필요가 없다.
그러면 모든 것을 다 플렉스로 표현?
된다. 다만 주의할 점?
나중에 추가된 css 속성이므로 구 브라우저에서 작동은 안 될 수 있다.
따라서 can I use에서 검색해서 알아보기.
