Flexbox

1. Flexbox의 구성

   • flex-container : 정렬이 필요한 요소를 감싸는 요소(부모)
   • item : 정렬을 적용할 요소(자식)
     (flex-container와 item에 사용되는 flex 관련 css속성이 나누어져 있음.)

2. Flexbox의 축

   • 중심축
   • 교차축, 반대축

div{
    border : 1px solid black;
    box-sizing: border-box;
    /* content + padding + border 합으로 width/height 지정 */
}


.item{
    width: 75px;
    height: 75px;
}


.item1{background-color: red;}
.item2{background-color: orangered;}
.item3{background-color: orange;}
.item4{background-color: yellow;}
.item5{background-color: yellowgreen;}
.item6{background-color: green;}
.item7{background-color: lightblue;}
.item8{background-color: blue;}
.item9{background-color: violet;}

.flex-container {
    height: 700px;
    background-color: gray;

    display: flex;
    /* 
        item(내부요소)을 감싸는 요소의 형식을 flex 변경
        -> item에 자동으로 지정된 margin 요소가 모두 사라지고
        content영역만큼의 크기만 가지게 됨 -> inline
    */

    /* flex-direction (부모 전용 속성) */
    /* 메인축의 방향과 시작 위치를 지정하는 속성 */

    /* 행 방향 (가로, 기본값) */
    /* flex-direction: row; */

    /* 행 방향(가로) + 순서 반대 */
    /* flex-direction: row-reverse; */

    /* 열 방향 (세로) */
    flex-direction: column;

    /* 열 방향 + 순서 반대 */
    /* flex-direction: column-reverse; */

    /* flex-wrap (부모 전용 속성) */
    /* 내부 item들을 포장하는 속성
        item들이 강제로 한줄에 배치되게 할지
        한줄을 벗어나 여러줄로 배치할 것인지를 지정
    */

    /* item을 한줄로 배치(기본값) */
    /* flex-wrap: nowrap; */

    /* item을 여러 줄로 배치 */
    /* flex-wrap: wrap; */

    /* item을 여러 줄로 배치 (뒤에서부터) */
    /* flex-wrap: wrap-reverse; */

    /* justify-content */
    /* 메인축 방향으로 item의 정렬 방법을 조정함 */

    /*  */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */

    /* flex-direction: column; */

    /* justify-content: flex-end; */
    /* justify-content: center; */

    /* item 주위에 메인축 방향 양쪽으로 일정한 크기의 공간을 추가 */
    /* -> 양 끝은 조금, item중간은 넓게 떨어져있음 */
    /* -> 브라우저 크기에 따라 변함 */
    /* justify-content: space-around; */

    /* item이 메인축 내에서 동일한 간격을 가진다 */
    /* justify-content: space-evenly; */

    /* 양 끝을 붙인 상태에서 item들의 간격을 일정하게 정렬  */
    /* justify-content: space-between; */

    /* flex-direction: column; */
    /* align-items */
    /* item들을 교차축 방향으로 정렬하는 방법을 지정하는 속성 */

    /* align-items: flex-start; */

    /* align-items: flex-end; */

    /* align-items: center; */

}

/* 요소 정가운데 배치하기 */

#con {
    width: 450px;
    height: 450px;

    display: flex;

    justify-content: center;

    align-items: center;
}

#center {
    width: 80px;
    height: 80px;
    background-color: red;
}

/* item(자식)에게 주는 flax속성 */
.basis-20 { flex-basis: 20%;}
.basis-30 { flex-basis: 30%;}
.basis-50 { flex-basis: 50%;}

<div class="flex-container">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
	<div class="item item3">item3</div>
	<div class="item item4">item4</div>
	<div class="item item5">item5</div>
	<div class="item item6">item6</div>
	<div class="item item7">item7</div>
	<div class="item item8">item8</div>
	<div class="item item9">item9</div>
</div>

<h1>Flexbox를 이용한 요소 정가운데 배치하기</h1>
<div id="con">
	<div id="center"></div>
</div>

<h3>flex-basis
	item의 메인축 방향으로의
	기본 점유율(크기)을 지정하는 특성
</h3>

<div class="flex-container">
	<div class="item item1 basis20">item1</div>
	<div class="item item2 basis30">item2</div>
	<div class="item item3 basis50">item3</div>
</div>