Flex Reference v1.0 </doc>

display: flex

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

Flexbox에서 사용하는 속성은 부모요소와 자식요소로 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다.

align-content

align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.

justify-content

justify-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.

flex-direction

flex-direction 속성은 콘텐츠의 정렬 방향을 정의합니다.

flex-basis

flex-basic 속성은 요소의 기본 크기를 정의합니다.

flex-grow

flex-grow 속성은 요소의 크기를 숫자를 통해 확대합니다.

flex-shrink

flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.

flex-wrap

flex-shrink 속성은 요소의 줄 속성을 정의합니다.

flex

flex 속성은 flex-grow, flex-shrink, flex-basis 속성을 정의합니다.

* 단위가 없는 속성 한개만 사용한 경우 : flex-grow
flex: 2
* 단위가 있는 속성을 한개만 사용한 경우 : flex-basis
flex: 100px
* 단위가 없는 속성 두개를 사용한 경우 : flex-glow | flex-shrink
flex: 2 2;
* flex-glow | flex-basis
flex: 2 200px
* flex-grow | flex-shrink | flex-basis
flex: 2 2 100px

align-items

align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.

justify-items

justify-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.

Sample01

.sFlex1 {display: flex; justify-content: space-between;}
.sItem1 {flex: 0 0 100px;}

Sample02

.sFlex3 {display: flex;} 
.sItem3 {
    flex-basis: 100px;
}
.sItem3 + .sItem3 {
    margin-left: 2%;

}
.sItem3:last-child {
    margin-left: auto;
}

Sample03

.sFlex3 {display: flex;} 
.sItem3 {
    flex-basis: 100px;
}
.sItem3 + .sItem3 {
    margin-left: 2%;

}
.sItem3:last-child {
    margin-left: auto;
}

Sample03

.sFlex4 {display: flex;} 
.sItem4 {
    flex-basis: 100px;
}
.sItem4 + .sItem4 {
    margin-left: 2%;

}
.sItem4:nth-child(2){
    margin-left: auto;
    flex-basis: 300px;
}
.sItem4:last-child {
    margin-left: auto;
}