Flexbox Layout
Flexbox Layout은 CSS3 웹 레이아웃 모델로 화면크기에 따라 container안의 element를 배치하는 효율적인 방법을 제공합니다.
Flex Container
display
flex를 이용하기 위해서는 display속성을 flex로 설정하여야 합니다.
.container {
display: flex;
}
flex-direction
flex-direction 속성은 flex item의 방향을 결정합니다.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
flex item은 기본적으로 한 줄에 모두 위치하도록 되어있습니다.
flex-wrap을 이용하여 여러 줄로 wrap할 수 있습니다.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow
flex-flow 속성은 flex-direction속성과 flex-wrap속성을 한꺼번에 쓸 수 있는 단축속성입니다.
.container {
display: flex;
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content는 메인 축의 정렬과 아이템 사이의 공간을 제어하는 속성입니다.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
align-items는 교차 축의 정렬과 아이템 사이의 공간을 제어하는 속성입니다.
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
align-content는 여러 줄의 교차 축을 정렬과 아이템 사이의 공간을 제어하는 속성입니다.
.container {
align-content: flex-start | flex-end | center | baseline | stretch;
}
Flex Item (Children element)
order
order속성은 flex container안에서 보여지는 순서를 제어합니다.
.item {
order: <integer>;
}
flex-grow
flex-grow 속성은 flex item의 크기를 결정합니다. (비율, 증가형)
.item {
flex-grow: <number>;
}
flex-shrink
flex-shrink 속성은 flex item의 크기를 결정합니다. (비율, 감소형)
.item {
flex-shrink: <number>;
}
flex-basis
flex-basis 속성은 공간을 분배하기 전에 item의 default size를 결정합니다.
.item {
flex-basis: <length> | auto;
}
flex
flex 속성은 flex-grow, flex-shrink, flex-basis를 결합한 단축속성입니다.
.item {
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>];
}
align-self
align-self 속성은 각각의 item에 align-items속성을 부여할 수 있습니다.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
'Dev > Frontend' 카테고리의 다른 글
[React] Hook (0) | 2020.12.17 |
---|