CSS Flexbox

 

 

 

말로만 듣던 Flex

오늘 한 번 해보도록 하자.

 

 

물론 방구석 css flex...

 

 

 

 

Flex는 flexible의 약자로 유연하게 박스가 움직이며 레이아웃을 구성하는 방법이다. 

딱딱하게 굳어있는 내 웹페이지에 유동성을 불어넣어 줄 아주 유용한 스타일이라 할 수 있다. 

 

 

 

적용방법

 

1. 부모박스와 자식박스를 준비한다. 

2. 부모박스에 "display: flex"를 적용한다. 

3. 부모박스에 flex가 적용되면, 아래 자식 박스들은 그 영향을 받게 되고 왼쪽 정렬로 착 정렬된다. (약간 inline-block 같은 느낌이랄까...)

4. 마지막으로 부모 혹은 자식박스에 하위속성들을 적용해서 예쁘게 꾸민다.

 

 

하위속성

 

flex: <grow> <shrink> <basis>

 

하위속성으로 자식박스의 grow, shirnk, basis 값을 설정할 수 있다. 

부모박스에 flex가 설정되면 자식박스의 하위속성은 기본적으로 grow = 0, srink = 1, basis = auto 값이 설정된다. 

각각이 의미하는 바를 알아보자. 

 

grow: 자식박스가 늘어나는 비율

grow가 1이면 100% 늘어나게 되고 0이면 늘어나지 않게 된다. 

 

shrink: 자식박스가 줄어들수 있는 비율

음.. 사실 shrink에 대한 이해는 다소 어렵다. 여러가지 설정값 변경을 통해 실험을 해봤는데 와닿지 않는다. shrink의 경우 width나 flex-basis 속성에 따른 비율을 뜻하므로 실제 크기를 예측하기 어려우니 가급적 기본값인 1로 두고 flex-growth 값을 변경하기를 추천한다. 

 

basis: 자식박스의 기본 크기

이름에서 유추할 수 있듯이 기본적인 박스의 크기값을 말한다. 하지만 flex-grow속성값이 0인 경우에만 basis 값이 유지될 뿐, grow값이 0이 아닌 상태에서는 basis크기는 보장되지 않는다. 세명중에 제일 약한 놈인듯.. 불쨩....

 

 

 

 

 

 

 

 

justify-content / align-itmes

 

 

부모박스에 적용할 수 있는 하위속성으로는 수평/수직 정렬을 뜻하는 justify-content와 align-items가 있다. 

 

justify-content

• flex-start
• flex-end
• center
• space-between

align-itmes

• flex-start
• flex-end
• center
• stretch