Flexbox
Flexbox?
-
flex box: 요소를 행 열 기준 자유롭게 배치 가능하게 해줍니다.
-
float position table만으로는 번거로웠던 작업들을 쉽게 정렬 하고 조작할 수 있습니다.
-
아이템의 사이즈와 상관없이 동일한 높이 위치 크기로 정렬하기가 어려웠는데 display: flex가 있으면 쉽습니다.
float을 쓰면 안되는 이유?
float은 이미지와 텍스트의 정렬을 지정하는게 원래의 목표입니다.
기능은 다음과 같은데
-
float: left 이미지는 왼쪽 글은 오른쪽
-
float: center 이미지 글의 중간
-
float: right 이미지는 오른쪽 글은 왼쪽
image대신 box를 정렬한다면 원래 목적엔 어긋나는 Hack이고 편법입니다.
Flexbox 구성과 축
1. container, item에 따라 달리 속성값을 가짐
-
container: display, flex-direction, flex-wrap, flex-flow, justify-content ,align-items, align-content
-
item: order, flex-grow, flex-shrink, flex,align-self
2. flexbox에는 중심축과 반대축이 있음
-
수평 item 정렬인 경우 main axis(중심)는 x축 cross axis(반대)는 y축
-
수직 item 정렬인 경우 main axis는 y축 cross axis는 x축
container 속성값
1. display: flex;
container를 flex박스로 만들어줌
2. flex -direction: 박스가 나열되는 방향
flex- direction: row: x축 main, 왼쪽에서 오른쪽으로
flex- direction: row-reverse: x축 main, 오른쪽에서 왼쪽으로
flex- direction: column: y축 main, 위에서 아래로
flex- direction: column-reverse: y축 main, 아래에서 위로
3. flex-wrap
nowrap: 기본값, 아무리 작아져도 박스가 한줄로 나옴
wrap : item이 꽉차면 다음줄로
4. flex-flow: flex-direction flex-wrap; 한번에 나타내줌
5. justify-content: 중심축기준 아이템을 어떻게 배치할지
flex-start; 기본 위 아래 왼오
flex-end: 반대 but reverse와 달리 1-10 순자 순서는 그대로
center: 중간
space-around: 아이템둘레에 공백 넣어줘 맨앞에 공백 1 애들 사이엔 공백 2라 전체 맨앞뒤 공백엔 차이가 있음
space-evenly: 모두 똑같이 공백이 들어감
space-between: 앞뒤는 공백 아예없고 중간만 공백
6. align-items; 중심축기준으로 배치된 item의 반대축 정렬
center;
baseline; item끼리 size가 다를때 고르게 정렬
적용전
적용후
7.align-content; 반대축기준 아이템을 어떻게 배치할지
justify-content와 같은 속성값 축만 달라 but 많은 브라우저에서 지원은 안되는게 많아서 mdn,can i use에서 확인 후 사용
item의 속성값
1. order; 기본값은 0 그래서 순서대로 item이 나오는데 지정하면 그 순서로 나옴
2. flex-grow;
기본값은 0 container 채우려는 노력 없음 근데 item에 1이상 넣어주면 container를 해당 숫자 비율로 전부채움.
3. flex-shrink; container 전부 채우고 화면 줄어들 떄 item들이 줄어드는 비율
4. flex-basis; container 전부 채우고 화면 커질떄 줄어들 떄 해당 비율로 크기 변함 % 사용
5. align-self; 아이템별로 정렬
center; 해당 아이템만 반대축기준으로 정렬
참조
🎮 개구리 게임
💻 https://studiomeal.com/archives/197
💻 https://ipex.tistory.com/entry/CSS3-flex-Box-justifycontent-alignitems
댓글남기기