플렉스 항목 속성
플렉스 항목 속성
주문
이 order속성은 동일한 컨테이너 안에있는 나머지 유연한 항목을 기준으로 유연한 항목의 순서를 지정합니다.
예
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
}
여유
설정 margin: auto;하면 여분의 공간이 흡수됩니다. 플렉스 항목을 다른 위치로 푸시하는 데 사용할 수 있습니다.
다음 예제 margin-right: auto;에서는 첫 번째 flex 항목을 설정 합니다. 이렇게하면 모든 추가 공간이 해당 요소의 오른쪽에 흡수됩니다.
예
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
}
완벽한 센터링
다음 예제에서는 거의 매일 문제를 해결합니다 : 완벽한 센터링.
flexbox를 사용하면 매우 쉽습니다. 설정 margin: auto;하면 항목이 두 축의 중앙에 완벽하게 배치됩니다.
예
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
정렬하다
align-selfflex 아이템 의 property는, 그 아이템의 flex 컨테이너의 align-items property를 오버라이드 (override)합니다. align-items속성 과 동일한 값을 가질 수 있습니다.
다음 예제에서는 서로 다른 align-self 값을 각 flex 항목에 설정합니다.
예
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
굽힘
이 flex속성은 동일한 컨테이너 안에있는 나머지 플렉스 항목을 기준으로 플렉스 항목의 길이를 지정합니다.
다음 예제에서 첫 번째 플렉스 항목은 여유 공간의 2/4을 소비하고 나머지 두 플렉스 항목은 여유 공간의 1/4을 각각 소모합니다.
예
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}