Flexbox

왜 Flexbox를 써야하는가?

이전의 inline-box 를 쓸 경우 margin 일일히 숫자 적어줘야하는데, 이게 찾아내기도 어렵고, 찾아내도 아이폰등 다양한 기기에서는 또 깨져버린다. 아래의 예시에서 볼 수 있듯이, 브라우저 사이즈에 따라 width가 300px 보다 작아지게 될 경우, flexBox가 비율에 맞게 자동으로 width 수정해준다. 개꿀!

 

사용시 유의사항

Father에게 적용한 예시는 children 컴포넌트에 영향을 미친다!

 

예시

CSS

.father {

    display: flex;

    justify-content: space-between; //다른 옵션: flex-start, flex-end

    align-items: flex-end;

}

 

.box {

   width: 300px;

   height: 300px;

   background-color: blue;

}

 

html

<div class="father">

   <div class="box"></div>

   <div class="box"></div>

   <div class="box"></div>

</div>

 

flex의 정렬 기준: main axis, cross-axis

flexbox의 aixs는 2가지. 

main axis

cross axis

기본값으로 main axis는 horiznontal로 정해져 있다. 바꾸고 싶다면 flex-direction을 쓰면 된다.

cross axis는 말 그대로 main axis의 가운데를 가로지르는 axis 

 

찌그러지는게 싫다면? flex-wrap

flex-wrap: wrap

flex-wrap: no-wrap

 

child 요소 하나만 이동하고 싶다? justify-self

.box: firs-child {

   align-self: flex-end;

}