#1.0 Life Before Flexbox

flexbox가 탄생하게된 이유중 하나는 화면의 크기에 따라 엘리먼트들의 위치가 달라지는 현상이다.

쉽게 말해 반응형 웹을 쉽게 만들기 위해 flexbox를 사용한다.

#1.1 First Rule of Flexbox

flexbox는 child와 소통하지 않는다. flexbox에서 무언가 하기위해선 컨테이너를만든다.

위의 박스들을 감싸고 있는 body의 disaply를 flex로 설정한다. 또한 반드시 붙어있는 부모 element의 display를 flex로 주어야한다.

#1.2 Main Axis and Corss Axis

flexbox css에는 row와 col이 있다. flex-direction으 ㅣ기본값은 row 이다. justify-content 는 수평축(main axis)에 있는 flex children의 위치를 변경한다. justify-content의 여러 속성중 space-around, space-between, space-evenly 가 있다.

• space-around는 화면의 크기에 맞춰서 자식 박스들의 양옆 공간을 균일하게 계산하여 배치한다.
• space-between은 space-around와 비슷한데 가장 첫 박스와 마지막 박스의 양 끝 여백을 없엔 후에 배치한다.
• space-evenly는 각각의 박스 양옆을 여백의 길이를 동일하게 계산하지 않고, 전체 화면의 가로길이에서 자식박스들을 균일한 간격을 두고 배치해준다. 가장 많이 사용될 것 같다.

align-items 는 cross axis(세로방향) 으로 하위 박스 조정 이때 align-items: center 값을 주었지만 해당 화면의 변화는 없다. 그 이유는 flex로 설정된 부모element의 높이가 자식 박스와 일치하기 때문에 아래로 내려갈 공간이 없기 때문이다. flex로 설정된 부모 element의 height 값을 높여주면 제대로 동작하는 것을 볼수 있다.

#1.3 Column and Row

이제 flex박스의 기준 방향을 디폴트인 row에서 col으로 변경해보자. flex-direction: column; 이라는 값을 주게되면 flexbox의 기준 방향이 column으로 변경되게 되어 위에서 확인했던 main-axis인 justify-content는 세로 방향으로 하위 박스들을 배치하게되고, cross-axis인 align-items의 값들은 수평방향의 하위 박스들을 제어하게 된다.

#1.4 align-self and order

align-self : 실제로 wrapper의 자식을 수정하는 경우. 지금까지 했던 내용은 부모element가 자식 element를 어떻게 제어 하는지에 대해서 이야기 했다. align-self는 한 박으세 해당하는 align-items라고 생각하면 된다. children에게 줄수 있다.

<body>
    <div class="father">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>

와 같은 형태라면 아래와 같이 css를 주어 하위 박스들을 각각 제어할 수 있다.