flex Layout

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

flex 관련 속성
속성 설명
align-content align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다.
justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
order order 속성은 flex 콘텐츠의 순서를 정의합니다.

flex-direction : 방향 설정

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

flex-wrap: 줄넘기 처리 설정

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

justify-content : 가로축 방향 설정

.flex21{
    display: flex;
    justify-content:flex-start ;    /* 기본값 */
    /* 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: 100px; margin: 10px;
}

align-content:세로축 방향 설정

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

flex

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

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

flex Layout01

/* 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: 200px;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: 100px;}
.item07:nth-child(1){flex-basis: 100px;}
.item07:nth-child(2){flex-basis: 300px;}
.item07:nth-child(3){flex-basis: 100px;}

flex layout02

/* flex21 */
.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: 300px; }
.item21:nth-child(5){height: 300px; }
.item21:nth-child(6){height: 100px; }
.item21:nth-child(7){height: 200px; }
.item21:nth-child(8){height: 100px; }
.item21:nth-child(9){height: 200px; }
.item21:nth-child(3n+1){order: 1; }
.item21:nth-child(3n+2){order: 2; }
.item21:nth-child(3n){order: 3; }

geid layout

grid 관련 속성
속성 설명
grid grid 속성은 그리드 레이아웃을 정의합니다.
grid-area grid-area
grid-auto-columns grid-auto-columns는 열의 크기를 설정합니다.
grid-auto-flow grid-auto-flow는 자동 배치 방식을 설정합니다.
grid-auto-rows grid-auto-rows는 행의 크기를 설정합니다.
grid-column grid-column
grid-column-end grid-column-end
grid-column-gap grid-column-gap
grid-column-start grid-column-start
grid-gap grid-gap
grid-row grid-row는 그리드 아이템의 단축 속성을 설정합니다.
grid-row-end grid-row-end는 그리드 아이템 행의 끝 위치를 설정합니다.
grid-row-gap grid-row-gap는 그리드 아이템 행의 간격을 설정합니다.
grid-row-start grid-row-start는 그리드 아이템 행의 시작 위치를 설정합니다.
grid-template grid-template
grid-template-areas grid-template-areas
grid-template-columns grid-template-columns은 열의 크기를 설정합니다.
grid-template-rows grid-template-rows