flex는 효과적으로 요소 간의 공간을 배치하고 정렬을 관리하기 위한 레이아웃으로
복잡한 레이아웃을 쉽게 구현할 수 있게 해준다.
display : flex 또는 inline-flex를 이용하여 설정해줄 수 있다.
flex는 블록레벨, line-flex는 inline레벨이다.
정렬 방향을 지정해줄 수 있는 flex-direction
-row : 행 정렬 즉 왼쪽에서부터 오른쪽으로 정렬해준다.
-row-reverse : 오른쪽에서부터 왼쪽으로 정렬해준다.
-column : 위에서 아래로 정렬해준다.
-column-reverse : 아래에서 위로 정렬해준다.
요소의 순서를 설정하는 order
-각각의 아이템에 대해 지정하는 것
-아이템의 순서를 설정할 수 있다.
-숫자가 작을수록 앞쪽에 배치된다.
정렬의 기준점을 정해주는 justify-content
-주 축(flex-direction으로 설정된 축)을 기준으로 요소들을 정렬하게 해준다.
-flex-start : 주 축을 기준으로 시작부분에서부터 배치
-flex-end : 주 축을 기준으로 끝 부분에서부터 배치
-center : 주 축을 기준으로 가운데 배치
-space-between : 첫 번째 아이템은 주 축의 시작 부분에 마지막 부분은 끝 부분에 배치 나머지 아이템은 균등한 간격을 분배
-space-around : 아이템들 사이에 동일한 여백을 주어 배치
-space-evenly : 아이템들 앞 뒤 사이에 동일한 여백을 주어 배치
space evenly와 space-around비교<body> <div class="flex-container"> <div class="flex-item">치코리타1</div> <div class="flex-item">치코리타2</div> <div class="flex-item">치코리타3</div> </div> </body>
.flex-item{ /*evenly*/ background-color: green; display:flex; flex-direction: row; } .flex-container{ display: flex; margin: 0; padding: 0; width: 1000px; height: 300px; background-color: blue; justify-content: space-evenly; }결과
.flex-item{ /*around*/ background-color: green; display:flex; flex-direction: row; } .flex-container{ display: flex; margin: 0; padding: 0; width: 1000px; height: 300px; background-color: blue; justify-content: space-around; }결과
차이가 눈에 보인다.
around의 경우 양팔간격 나란히 라고 생각하면 될 것 같고
evenly의 경우 공간을 모두 동일한 간격을 두고 서 있는 것이다.
아이템의 정렬 축align-items
-모든 flex아이템에 대해 교차 축에서의 정렬 방식을 지정하는 것(주 축과 수직)
-stretch : 기본값으로, flex컨테이너의 끝까지 맞춰진다.(위의 예시들이 stretch)
-flex-end : 교차 축의 끝 부분부터 아이템을 정렬
-flex-start : 교차 축의 시작 부분부터 아이템을 정렬
-center : 가운데 정렬flex-end와 center의 예시 사진
(위)flex-end사진 (아래)center사진 (안구테러가 심해서 색 교체)
아이템들 간 간격을 정하는 gap
gap : 수치를 이용 아이템들 간의 간격을 설정해준다.
flex 아이템들이 여러줄 또는 한 줄에 배치되게 설정하는 flex-wrap
1. nowrap : 기본 값으로 아이템들이 한 줄에 배치되는데, 만약 길이가 넘치면 넘치는 아이템들은 보이지 않는다.
2. wrap : 아이템들을 여러 줄에 걸쳐서 보여준다. 넘치면 줄 바꿈이 이루어진다.(이 또한 줄바꿈은 이루어지지만 줄 바꿈을 계속 했는데도 영역이 모자라면 넘친 부분들은 보이지 않게 된다.)
3. wrap-reverse : 여러줄에 걸쳐 배치 하는데 줄의 배치 순서가 역순이다.
wrap-reverse예시
.flex-item{ background-color: green; /* display:flex; */ width: 50px; } .flex-container{ display: flex; margin: 0; padding: 0; width: 1000px; height: 300px; background-color: skyblue; justify-content: space-evenly; align-items: flex-start; flex-wrap: wrap-reverse; flex-direction: row; gap : 30px; }결과
이거 이해하다가 세월 다 보냈다.
다시 잊을 것 같은 나를 위해서 순서대로 생각해보자.
1. flex-direction: row를 통해서 컨테이너의 주 축을 가로로 설정(왼쪽에서부터 오른쪽으로 정렬됨)
2. align-items: flex-start를 통해서 아이템의 정렬 순서를 위에서부터 아래로 설정
3. 여기서 만약에 fles-wrap: wrap이고 줄바꿈이 일어난다면 줄의 순서를 매겼을 때 1번 줄이 위에 있는 줄이고, 2번 줄이 밑에 있는 줄이다.
4. 근데?! flex-wrap:wrap-reverse를 주면 줄의 순서가 바뀌게 되는 것이다. 즉 첫 번째 줄이었던 1번 줄이 밑에서부터 정렬되게 되는거다.
아니면 고쳐주세요..
그 외 속성
flex-basis : 아이템 메인 축의 길이 flex-direction 값에 따라서 넓이나 높이값으로 적용되는데, 기본값은 auto이다.
flex-grow : 얼마나 자리욕심 부릴건지 나타내는 정도 밑에 flex-shrink랑 반대되는 말 이라고 생각하자
flex-shrink : 전체 공간이 좁아질 때 자리 해당 아이템이 양보해줄건지 정해주는거
다른 아이템에 비해 상대적인 값으로 0이면 양보 절해안해주고 0이상의 실수로 나타낸다 양보 잘 해주게 설정해주면 basis로 길이를 늘려놔도 양보 잘 해서 자기가 차지할 수 있는 만큼만 차지하게 함
느낀점
예시로 사용하는 나의 코드들이 좋은코드가 아닐 순 있다. 하지만 각 태그와 요소들이 어떻게 동작하고 돌아가게 되는지 이해하는 것이 우선적으로 중요하다고 생각되었다. 아마 앞으로 프로젝트나 작업을 해가며 조금 더 완성도 있는 코드들이 생기지 않을까 생각된다.
