[16강] flex 레이아웃으로 최신 웹 만들기
- flex 레이아웃
✋ flex 레이아웃, 왜?
- 쉽고 빠르게 가운데에 있는 요소들을 자기 자신의 중심으로 오게 할 수 있다.
- 추가되는 데이터들을 유동적으로 배열할 수 있다.
⭐ flex 레이아웃
➰ flex item: flex 안에 있는 것(요소?)들.
➰ flex container: flex item을 포함하고 있는 것.
➡ 무조건 display: flex여야한다!
➰ display flex의 자식들은 자기 자신의 display가 block이더라도 부모가 flex면 flex item들이라고 명명되면서 block의 특징을 잃어버린다.
➰ 그래서 이렇게 일자로 쭉 이어진다!
➰ span(inline 요소)일 때도 마찬가지!
✅ 보통 자기 자신의 display(inline-block 등으로)를 바꾸고 속성을 줘 레이아웃을 변경하는데,
flex 레이아웃은 부모를 flex로 바꾼 후 이 display flex 속성을 가지는 곳에서 모든 것을 바꾼다.
🌕 justify-content
➰ justify-content: center; 내용을 가운데 정렬 해준다!
➡ flex-end, flex-start도 있다.
➡ text-align은 여기서 못 쓴다!
🌕 space-around, space-between
➰ space-between: 자식 요소를 최대한 멀리 떨어뜨려 놓는다.
➰ space-around: 예를 들어, hello의 여백이 1이라면, hello와 hello 사이의 여백은 각각 1이므로 총 여백은 2가 되고, 맨 왼쪽과 맨 오른쪽은 여백이 하나이니 1이다. 각 좌우의 여백을 동일하게 두지만 그 여백을 합치면 2배가 되게 한다.
➰ space-evenly: around와 달리 요소의 사이사이 여백까지 모두 동일하다. 자식 간의 여백이 모두 동일하다.
🌕 align-items
➰ align-items: center; 세로의 중심으로 온다.
➡ 똑같이 flex-end, flex-start도 있다.
➡ justify-content와 달리 세로 정렬을 해준다.
➰ 원래 기본적으로 flex-direction: row;로 설정되어 행으로 정렬되었는데, flex-direction: column;을 설정하면 열로 정렬되어 세로롤 정렬되는 모습을 확인할 수 있다.
🍒 정리
오늘은 display: flex라는 속성에 대해 배웠다. 교육 들을 때 정말정말 중요한 속성이라고 배웠다. 그게 왜 그런가 했더니, 엄청난 정렬들이 숨어있었던 것이다!
근데 아직 이해를 못 한 것인가... 왜 이걸 써야하는지 모르겠다ㅠ 이건 책도 보면서 내일 연구를 해봐야겠다.
flex-item들을 한 번에 정렬하는 것은 쉬울 것 같다. 이걸 그래서 주로 list에 쓰는 건가? 한 번에 적은 것들을 같은 칸에 한 번에 정렬하려면 그 list를 display: flex라 두고 justify-content: center;나 left 등을 두면 금방 한 번에 정렬되니까 그런 건가? 그렇다면 편리해서 쓸만한 것 같다.
좀 더 여러 번 써봐야 얼마나 유용한지, 편리한지 알 수 있을 것 같다.
게시판 만들 때 잘 써보자!!
