플렉스 항목 속성

플렉스 항목 속성

주문

이 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;

}