flex 속성

<div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
</div>

.flex-container {
    display: flex;
}
display:flex를 부모에 주면  자동으로 div 박스 3개 가로배치됨

[display: flex 활용한 좌우정렬]

.flex-container {
    display: flex; <-- 가로 정렬 (기본 태그 먼저 주고 시작)
    justify-content: center; <-- 박스 가운데 정렬
    justify-content: flex-start; <-- 좌측정렬
    justify-content: flex-end; <-- 우측정렬 
    justify-content: space-between; <-- 상자 사이 띄기
    flex-diretion: column/row <-- 세로배치/가로배치
    flex-wrap: wrap; <-- 박스 너비 클시 배열 밑으로 보내고 싶을 때

}

[flex, align-items 를 활용한 상하정렬]

.flex-container {
    display: flex;
    height: 500px;
    align-items: center <--상하 가운데 정렬
    align-items: flex-end <-- 상하 맨 하단 정렬
    justify-content: center; <-- 박스 상하좌우 가운데 정렬

[style로 박스 크기 비율 설정]

<div class="flex-container">
   <div class="flex-item" style="flex-grow: 1">1</div> <-- 1배
   <div class="flex-item" style="flex-grow: 2">2</div> <-- 1번 박스의 2배
   <div class="flex-item" style="flex-grow: 3">3</div> <-- 1번 박스의 3배
</div>