flexGrid Reference v1.0 </doc>

Flex

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

flex 관련 속성

Flex Layout

 /* base */
.flex {
    background: #f7f7f7;
    border-radius: 3px;
    padding: 20px;
    counter-reset: items;
    margin-bottom: 20px;
}
.item {
    border-radius: 3px;
    background: #a2cbfa;
    border: 1px solid #4390e1;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgba(0,90,250,0.05);
    min-height: 100px;
    color: #fff;
    padding: 10px;
}
.item::before {
    counter-increment: items;
    content: counter(items);
}
/* flex01 */
.flex01 {display: flex;}

/* flex02 */
.flex02 {display: flex;}
.item02 {flex-grow: 1;}

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

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

/* flex05 */
.flex05 {display: flex; flex-direction: row-reverse;}
.item05 {flex-basis: 10%; margin-left: 2%;}

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

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

flex-direction : 방향 설정

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

flex-wrap : 줄넘김 설정

.flex21 {
    display: flex; 
    flex-wrap:nowrap;
}
.item21 {width: 40%; margin: 10px;}

justify-content : 가로축 방향 설정

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

align-content : 세로축 방향 설정

.flex21 {
    display: flex; 
    flex-wrap:wrap;
    align-content: stretch; /*기본값*/
    height: 300px;
}
.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

.flex21 {
    display: flex;
    flex-flow: column wrap; /* flex-direction, flex-wrap */
    align-content: space-between;
    height: 800px;
}
.item21 {
    width: 32%;
    margin-bottom: 2%;
}
.item21:nth-child(1) {height: 100px;}
.item21:nth-child(2) {height: 200px;}
.item21:nth-child(3) {height: 300px;}
.item21:nth-child(4) {height: 200px;}
.item21:nth-child(5) {height: 200px;}
.item21:nth-child(6) {height: 200px;}
.item21:nth-child(7) {height: 300px;}
.item21:nth-child(8) {height: 200px;}
.item21:nth-child(9) {height: 100px;}
.item21:nth-child(3n+1) {order:1}
.item21:nth-child(3n+2) {order:2}
.item21:nth-child(3n) {order:3}

Grid