Flex / Grid

Flex Layout

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.

Flex Layout01

/* fkex01 */
.flex01 { display: flex;}

/* fkex02 */
.flex02 { display: flex;}
.item02 { flex-grow: 1;}   /*현재 갖고 있는 값에 맞춰서 나온다*/

/* fkex: 3 */
.flex03 { display: flex;}
.item03 { flex-grow: 1;} 
.item03 + .item03 {margin-left: 2%;}

/* fkex: 4 */
.flex04 { display: flex;}
.item04 { flex-grow: 1;} 
.item04:nth-child(4) { flex-grow: 2;} 
.item04 + .item04 {margin-left: 2%;}

/* fkex: 5 */
.flex05 { display: flex; flex-direction: row-reverse;}  /*row-reverse : 오른쪽으로 감*/
.item05 {flex-basis: 10%;} 
.item05 {margin-left: 2%;}

/* fkex: 6 */
.flex06 { display: flex;}
.item06 {flex-basis: 10%;}
.item06 + .item06 {margin-left: 2%;}
.item06:last-child {margin-left: auto;}

/* fkex: 7 */
.flex07 { display: flex; justify-content: space-between;}
.item07:nth-child(1) {flex-basis: 100px; }
.item07:nth-child(2) {flex-basis: 300px;}
.item07:nth-child(3) { flex-basis: 100px;}

flex-direction : 방향 설정

.flex21 {
    display: flex;
    flex-direction: row;
}
.item21 {width: 100px; margin: 10px;}

flex-wrap : 줄넘김 처리 설정

/* fkex021 */
    .flex21 {
        display: flex;
        flex-wrap: nowrap;
    }
    .item21 {
        width: 300px; margin: 10px;
    }

justify-content : 가로축 방향 설정

.flex21 {
    display: flex;
    justify-content: flex-start;  /* 기본 */
    /* 
    justify-content: flex-end
    justify-content: flex-center
    justify-content: space-between
    justify-content: space-around
    justify-content: space-evenly
    */
}
.item21 {
    width: 100px; margin: 10px;
}

align-content : 세축 방향 설정

/* fkex021 */
.flex21 {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    align-content: stretch;  /* 기본 */
    /* align-content: flex-start
    align-content: flex-end
    align-content: flex-center
    align-content: space-between
    align-content: space-around
    align-content: space-evenly */
}
.item21 {
    width: 100px; margin: 10px;
}

flex

flex는 flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속기형 작성법입니다.
flex: 1;
/* flex-grow:1 , flex-shrink:1 , flex-basis:0% */
flex: 100px;
/* flex-grow:1 , flex-shrink:1 , flex-basis:100px */
flex: 1 100px;
/* flex-grow:1 , flex-shrink:1 , flex-basis:100px */
flex: 1 1 auto
/* flex-grow:1 , flex-shrink:1 , flex-basis:auto */

.flex21 {
    display: flex;
}
.item21 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: 10px;
}

Flex Layout02

/* fkex021 */
.flex21 {
    display: flex;
    flex-flow: column wrap; /* flex-direction + flex-wrap */
    align-content: space-between;
    height: 800px;
}
.item21 {
    width: 32%;
    margin-bottom: 2%;
}

Grid Layout