- flex box란?
- flex의 axis(축)
- flex의 관련 속성
flex box는 아이템들을 행(수평)이나 열(수직)로 정렬하기 위한 1차원 레이아웃 방법이다. 아이템은 추가 공간을 채우거나 더 작은 공간에 맞게 축소된다.
그동안 CSS 레이아웃을 만드는 데 사용할 수 있는 적당한 브라우저 호환 도구는 float이나 position, table 등과 같은 것들이었는데 복잡하고 시간이 오래걸렸다고 한다. 또한 이 도구들은 어떤 특정한 기능을 수행하기에는 한계가 있었고 그래서 나타난 것이 flex box이다.
- float 프로퍼티(속성) 에 대하여!
float의 원래 목적은 이미지와 텍스트들을 어떻게 배치할 것인지에 대해 정의하기 위해 나온 프로퍼티(속성)이다. 텍스트들이 이미지를 감싸면서 배치될 수 있도록 해주는 것이 float 이었다. 예전에는 CSS의 마땅한 레이아웃 기능이 없어서 float을 원래 목적에 어긋나는 방식으로 사용해오다가 flex box 프로퍼티가 나타나면서 줄어들었다고 한다.
아이템들이 정렬된 방향에 따라서 중심축(Main axis)과 반대축(Cross axis)이 바뀌게 된다.
flex box의 속성들은
container에 적용하는 속성
아이템에 적용하는 속성
이렇게 두 가지로 나뉜다.
display: flex;
flex-direction: row // 수평 (left to right) flex-direction: row-reverse // 수평 (right to left) flex-direction: column // 수직 (top to bottom) flex-direction: column-reverse // 수직 (bottom to top)
flex-wrap: nowrap // 아무리 작아져도 아이템들이 한 줄에 붙어있음 (default) flex-wrap: wrap // 한 줄에 차면 다음 줄로 넘어감 (top to bottom line) flex-wrap: wrap-reverse // 한 줄에 차면 다음 줄로 넘어감 (bottom to top line)
flex-flow: column nowrap; // 예시
justify-content: flex-start; // 아이템 순서 유지하며 left to right or top to bottom justify-content: flex-end; // 아이템 순서 유지하며 right to left or bottom to top justify-content: center; // 아이템을 중심으로 유지 justify-content: space-around; // 아이템을 각각 둘러싸는 공백 생성 justify-content: space-evenly; // 아이템 사이 똑같은 간격 생성 justify-content: space-between; // 양 끝 아이템만 화면에 붙이고 그 사이에 아이템에 간격 생성
align-items: center; // 아이템 순서 유지하며 수직(반대축) 중앙 배치 align-items: baseline; // 특정 아이템의 padding값에 맞추어 나머지 아이템을 균등하게 배치
align-content: space-between; // top and bottom 아이템 줄만 화면에 붙이고 그 사이 아이템에 간격 생성 align-content: center; // 아이템 순서 유지하며 수직(반대축) 컨테이너 중앙 배치
.item1 { background: #ef9a9a; order: 2; } .item2 { background: #f48fb1; order: 1; } .item3 { background: #ce93d8; order: 3; } // 아이템 순서 변경 2-1-3 (but 현업에서 잘 쓰이지는 않는다고 한다)
flex-grow: 0; // default // .item1 { background: #ef9a9a; flex-grow: 2; } .item2 { background: #f48fb1; flex-grow: 1; } .item3 { background: #ce93d8; flex-grow: 1; } // (컨테이너가 늘어나면) 아이템 1은 아이템2와 3에 비해 2배로 커지려고 함
flex-shrink: 0; // default // .item1 { background: #ef9a9a; flex-grow: 2; flex-shrink: 2; } .item2 { background: #f48fb1; flex-grow: 1; flex-shrink: 1; } .item3 { background: #ce93d8; flex-grow: 1; flex-shrink: 1; } // (컨테이너가 줄어들면) 아이템1은 아이템2와 3에 비해 2배로 줄어드려고 함
flex-basis: auto; // default, flex-grow, shrink를 따라감 // .item1 { background: #ef9a9a; flex-basis: 60% } .item2 { background: #f48fb1; flex-basis: 30% } .item3 { background: #ce93d8; flex-basis: 10% } // (컨테이너가 늘거나 줄어들어도) 아이템의 크기 비율이 설정한 수치만큼 유지됨
.item1 { background: #ef9a9a; flex: 2 2 auto; } .item2 { background: #f48fb1; flex: 1 1 auto; } .item3 { background: #ce93d8; flex: 1 1 auto; }
.item1 { background: #ef9a9a; align-self: center; } .item2 { background: #f48fb1; } .item3 { background: #ce93d8; } // 아이템1만 수직 중앙으로 배치
그 외
유용한 html shortcut
div.container>div.item.item${$}*10
+Tab
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item item9">9</div> <div class="item item10">10</div> </div>
height: 100vh vs height: 100%
부모 태그에 상관없이 보이는 부분을 활용하려면 100vh,
부모 태그에 맞추어 높이의 모두 활용하려면 100%
유용한 flex box 정보 사이트 (중요)(북마크!)
A Complete Guide to Flexbox