[CSS] flex

Flexbox 레이아웃

기존에 학습했던 레이아웃 방법들
    1. display : block / inline / table
    2. position : static, relative, absolute, fixed ...

FlexibleBox 레이아웃
    float 나 position 을 사용하지 않고도 반응형 레이아웃 을 손쉽게 작성할수 있다.

FlexibleBox 사용하기
    1. 우선 flex container 정의
    2. container 안에 flex item 들 나열

Flex container 의 property 들
    flex-direction : 
        column, column-reverse, row, row-reverse
    flex-wrap : 
        > nowrap(디폴트), wrap,  wrap-reverse
    flex-flow : 
        > flex-direction 과 flex-wrap 을 동시에 지정가능
    justify-content : 
        > center, flex-start(디폴트), flex-end, space-around, space-between
    align-items : 
        > center flex-start, flex-end, stretch(디폴트), baseline
    align-content :  flex line 을 정렬하는데 사용
        > space-between, space-around, stretch(디폴트), center,  flex-start, flex-end  

    Flex 참조: 
    https://www.w3schools.com/css/css3_flexbox.asp
    https://heropy.blog/2018/11/24/css-flexible-box/

---

* flex-direction: column / flex-direction: column-reverse

 

---

* flex-direction: row / flex-direction: row-reverse

---

* flex-wrap : wrap / flex-wrap : wrap-reverse

---

* flex-flow: row wrap

- flex-direction과 flex-wrap을 동시 지정

---

* justify-content: center
  justify-content: flex-start
  justify-content: flex-end
  justify-content: space-around
  justify-content: space-between

---

* align-items: center
  align-items: flex-start
  align-items: flex-end
  align-items: stretch
  align-items: baseline -> 글씨 아래 라인을 기준으로

---

* align-content: space-between
  align-content: space-around
  align-content: stretch
  align-content: center
  align-content: flex-start
  align-content: flex-end