-
CSS display flex에 대해 알아보기Web-app/CSS 2023. 10. 27. 14:18728x90
mozilla 사이트를 참조하여 display 옵션 중 flex에 대해 알아보았습니다 👩💻
flex layout이란?
1차원 layout model을 설계하는 layout module (row 또는 column을 다룸),
2차원 layout model을 다루는 grid layout과 대조적이며
항목간 공간 배분 및 정렬 기능을 제공합니다.
✔ flexbox 정의 방법
부모 container에 display: flex; 를 써줍니다.
children은 flex item이 됩니다.
<body> <div class="container"> <div class="box container1">container1</div> <div class="box container2">container2</div> <div class="box container3">container3</div> </div> </body>.container{ display: flex; flex-direction: column; } .box{ border: 3px black solid; padding: 8px; }
flexbox의 2가지 축
1) main axis : flex-direction property에 의해 정의됨
2) cross axis : main axis의 교차축, flex-direction의 교차 방향
✔ flex-direction (부모 container에 적용)
- row (default) : 부모 container 내 children이 행 방향으로 배치됨. content가 inline을 적용한 것 처럼 content 크기만큼 동작.
- column : 부모 container 내 children이 열 방향으로 배치됨. content가 한줄을 차지하는 block 처럼 동작
만약 display: inline-flex; 입력시 content크기만큼만 차지하게 됨.
display: flex & inline-flex 비교 - 이외 row의 거꾸로 row-reverse, column의 거꾸로 column-reverse 방향이 있습니다.
부모 container에 적용되는 flex property
✔ flex-direction (위 참조)
✔ flex-wrap
- nowrap (default) : 화면을 줄였을 때 content를 표시하기 위해 다음줄로 넘어가지 않음.
- wrap : 화면을 줄였을 때 content를 표시하기 위해 다음줄로 넘어감.
✔ flex-flow
flex-direction과 flex-wrap이 합쳐진 것
ex) flex-flow : row wrap;
✔ align-items
cross axis를 따라서 item이 정렬되는 위치를 정의
- stretch : default 값으로 flex items의 height가 container의 height로 자동으로 정해짐
- flex-start: cross axis의 시작 지점에 flex items 위치
- flex-end: cross axis의 마지막 지점에 flex items 위치
- center : cross axis의 가운데 지점에 flex items 위치
flex-direction: row; 를 기준 ✔ justify-content
main axis를 따라서 item이 정렬되는 위치를 정의
- flex-start : default 값, main axis의 시작 지점에 위치
- flex-end : main axis의 끝 지점에 위치
- center : main axis의 가운데 지점에 위치
- space-between : 각 item 사이 모든 공간을 균등하게 분배
- space-evenly : item 사이 공간이 동일한 크기를 가지며 분배, 양 끝에도 공간이 있음.
- space-around : 각 항목의 오른쪽과 왼쪽이 동일한 공간이 있도록 분배
Children flex items에 적용되는 flex property
children에 적용될 property를 알아두기 전에 알아야할 개념! available space
가용 container내에 contents를 채우고 남은 공간 = available space
✔ flex-basis
해당 항목이 차지하는 공간을 설정 (padding, margin 제외), auto 값이 default
flex-direction: row이면 width를 설정, flex-direction: column 이면 height 를 설정
.container{ display: flex; flex-direction: row; /* flex-wrap: wrap; */ } .box{ border: 3px black solid; padding: 8px; } .container1{ flex-basis: 100px; }
flex-wrap : nowrap 일때 화면을 줄이면 flex-basis에서 적용한 크기보다 줄어듬
flex-wrap : wrap 일때 화면을 줄이면 flex-basis에서 적용한 크기를 유지
✔ flex-grow
main axis available space을 비례적으로 분배할 때 사용
.container{ display: flex; flex-direction: row; /* flex-wrap: wrap; */ } .box{ border: 3px black solid; padding: 8px; } .container1{ flex-basis: 100px; flex-grow: 1; } .container2{ flex-basis: 100px; flex-grow: 2; }
available space를 container:container = 1:2로 나누어 차지함을 확인할 수 있습니다.
✔ flex-shrink
부모 container의 공간이 충분하지 않을 때 줄어드는 비율을 조절
.container1{ flex-basis: 200px; flex-shrink: 1; } .container2{ flex-basis: 200px; flex-shrink: 2; }
✔ flex
flex-grow, flex-shrink, flex-basis의 축약 표현
ex) flex: 1 1 auto;
flex property에 미리 정의된 옵션들이 존재
flex: initial → flex: 0 1 auto 와 동일
flex: auto → flex: 1 1 auto 와 동일
flex: none → flex: 0 0 auto 와 동일
flex: 1 → flex: 1 1 auto 와 동일
flex: 2 → flex: 2 1 auto 와 동일
Reference
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an out
developer.mozilla.org
728x90'Web-app > CSS' 카테고리의 다른 글
CSS display grid 알아보기 (1) 2023.10.28 CSS font 중요한 property에 대해 알아보기 (0) 2023.10.22 CSS 상대단위 rem, em 알아보기 & viewport 에서의 단위 vw, vh, vmin, vmax 알아보기 (0) 2023.10.13 CSS background 에 image 넣기 & 옵션 설정하기 (0) 2023.10.09 CSS property float와 clear 알아보기 (0) 2023.10.09