Flexbox 및 속성 - 설명
표시하다
.div{
display: flex;
}
플렉스 방향
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
플렉스 랩
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap - 모든 플렉스 항목이 한 줄에 표시됩니다.
wrap - 플렉스 항목은 위에서 아래로 여러 줄로 래핑됩니다.
wrap-reverse - 플렉스 항목이 아래에서 위로 여러 줄로 래핑됩니다.
플렉스 흐름
.container {
flex-flow: column wrap;
}
플렉스-수축
.item {
flex-shrink: 3; /* default 1 */
}
음수가 유효하지 않은지 확인
정렬 자체
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
정렬 내용
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
주문하다
.item {
order: 5; /* default is 0 */
}
Reference
이 문제에 관하여(Flexbox 및 속성 - 설명), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhairyashah/flexbox-properties-3nd3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)