Layout Reset
*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
border-box : 기본여백이있기 때문에 미리 리셋을 해주고 css를 시작한다.
Flexbox
display: flex 분석하기
HTML 코드
<div id="outer"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div>
CSS 코드
#outer { display: flex; border: 1px dotted red; padding: 10px; } .box { border: 1px solid green; padding: 10px; }
여기서 CSS에서의 Display: flex; 요소를 추가한다.
[그림] "display: flex"가 적용된 빨간 박스 내의 자식 요소는 왼쪽부터 차례대로 배치됩니다.
Flex 요소에 방향 지정하기
flexbox 기본값 : 수직분할
- row(기본)
- column
주의할점!
-
display 속성에 flex를 적용하는것은 부모 요소에 적용한다.(display:flex)
-
자식요소는 flex라는 속성에 값을 적용한다 (flex: 0 1 auto)
반드시 알아두기 : grow (팽창 지수), shrink(수축 지수), basis(기본 크기)
자식 박스에 어떠한 속성도 주게되지않을시 왼쪽부터 flex 요소는 다음과 같은 기본값이 적용됨
flex: 0 1 auto;
flex 속성에 적용되는 세가지 영역은 margin 이나 padding 에서 띄어쓰기를 기준으로 의미하는 바가 구분되는것과 동일함.
그러나 flex속성에 적용되는 세가지는 기본크기를 바탕으로 늘리거나 줄일 수 있는 값이 적용된다.
flex: <grow> <shrink> <basis>
값(세속성)들을 따로 입력할 수도 있다.
grow : 자식 박스는 얼마나 늘어날 수 있을까?
flex 의 기본속성중 grow값을 1로 변경해보자
<div id="outer"> <div class="box target">.box.target</div> <div class="box">.box</div> <div class="box">.box</div> </div>
.target { flex: 1 1 auto; }
늘어나는 값을 1로 설정하게된다면 1/1 로 설정이 가능하다..
나머지 박스들은 콘텐츠가 담긴 길이를 제외한 나머지로 설정이된다
.box { flex: 1 1 auto; }
box의 값들을 1로 주게된다면 총 div class가 box는 3개이므로
1/3 길이로 모든 박스가 동일한 비율로 가로 길이가 늘어나게된다.
이로인해 flex-grow 속성에 적용하는 값은 비율을 의미한다.
모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가지게된다.
.box { flex: 1 1 auto; } /* * 자식 박스가 총 세 개인데, target만 2의 비율을 가집니다. * 2(target) + 1(box2) + 1(box3) = 4 이므로, * target의 비율은 50% 입니다. */ .target { flex: 2 1 auto; }
* target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 2+1+1 = 4입니다. 따라서, target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이를 가집니다.
Shrink : 자식 박스는 얼마나 줄어들까?
shrink는 grow와 반대로 설정한 비율만큼 박스 크기가 작아진다.
Tip : grow 와 shrink는 두개 같이 사용하는 일은 비추천
개인적으로 grow 속성으로 비율을 변경하고 , flex-shrink 속성은 기본값인 1로 두고 사용하자!
basis 이 박스의 기본크기는 얼마일까?
자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본크기이다. flex-grow 가 0일때, basis 크기를 지정하면 그 크기는 유지된다.
<div id="outer"> <div class="left">메뉴</div> <div class="right">본문</div> </div>
/* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.left {
flex: 0 1 100px;
}
/* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */
.right {
flex: 1 1 auto;
}
[코드] 왼쪽 메뉴 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px을 적용합니다.
[그림] 오른쪽 본문 박스는 flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받습니다.
- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
- 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
- (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
정렬방법
flexbox를 원하는대로 제어하기 위해선 axis(축)의 개념에 대한 이해가 필요하다.
-
main axis는 flex-direction 속성에 의해 결정된다.
-
flex-direction의 기본 값인 row인 상태일때 main axis는 가로축이 된다.
-
이 axis를 기준으로 정렬할 수 있는 속성들에 justify-content와 align-items가 있다
-
justify-content 속성 : main axis를 기준
-
align-items 속성 : cross axis를 기준으로 정렬한다.
콘텐츠 수평 정렬 (justify-content)
부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있다. 다음은 justify-content 속성의 값이 될 수 있는 주요 옵션이다.
- flex-start
- flex-end
- center
- space-between
콘텐츠 수직 정렬 (align-items)
부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있습니다. 다음은 align-items 속성의 값이 될 수 있는 주요 옵션입니다. 한 번씩 적용해 보세요.
- flex-start
- flex-end
- center
- stretch
