레이아웃을 만들때 적용하는 속성인
📝 Flex - 공식문서에 대해 알아보자

1. container 와 item

flex 속성을 적용하기 위해서는 부모와 자식의 관계가 존재해야 한다

컨테이너와 아이템에 적용되는 속성이 다르므로 주의해서 쓰자

• flex-direction
  기본적 방향은 row이다

• flex-grow
  item의 여백을 나눠갖는 속성을 말한다 -> 마치 스크래치 되는 듯한 느낌
  이 값에 따라 차지하는 공간의 사이즈가 달라진다 (상대적인 비율)

• flex-basis
  기본적인 item 크기의 값이다

• flex-shrink
  기본적으로 flex-basis값을 가지고 있을때 사용가능한 속성이다.
  이 값을 0으로 두면, 이기적으로 공간을 자기혼자 차지하고 있는다

2. Holy Grail Layout

Nav, Main, aside을 section안에 두어 이에 대한 class명을 content라고 두고,
여기에 또다시 flex속성을 두어 기본정렬을 row로 설정하여 가로로 정렬한다.

Nav와 aside에 flex-basis와 flex-shrink = 0으로 두어 사이즈가 고정되도록하고,
Main의 사이즈만 변동되게 만든것이 바로 Holy Grail Layout이다

   <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>

3. 나머지 속성들

📍 container

• flex-direction
  row row-reverse column column-reverse

• flex-wrap
  nowrap wrap (아이템이 줄바꿈된다) wrap-reverse

• align-items 정렬에 대한 결정
  flex-start flex-end center
baseline 가상의 줄에 대한 맞춤
  stretch 컨테이너안에 늘려짐

• justify-content 수평에 대한 결정
  flex-start flex-end space-between center space-around

• aligin-content
  그룹과 그룹간의 정렬

📍 item

• aligin-self
  item 각각에 대한 속성을 주고 싶을 때 사용

• flex
  {flex : flex-grow [flex-shrink][flex-basis] }

• oreder
  item의 순서를 바꾸고 싶을 때 사용 -> 검색엔진