박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-10-23 15:39:09

앞으로

3210명이 탐색했습니다.

이 글은 박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명을 담고 있습니다. 필요한 친구들이 참고하시면 좋을 것 같습니다.

우리는 box-direction 속성이 유연한 상자 내부의 "하위 요소" 순서를 설정할 수 있다는 것을 알고 있습니다. CSS3 유연한 상자 모델에서는 box-ordinal-group 속성을 사용하여 유연한 상자에 있는 각 "하위 요소"의 "정확한" 표시 위치를 설정할 수도 있습니다.

box-ordinal-group 속성의 값은 1부터 시작하는 자연수이며, 하위 요소의 위치 번호를 설정하는 데 사용됩니다. 하위 요소의 분포는 이 속성 값에 따라 작은 것부터 큰 것 순으로 정렬됩니다. 기본적으로 하위 요소는 요소의 위치를 기준으로 정렬됩니다.

box-ordinal-group 속성 값을 지정하지 않는 하위 요소의 경우 하위 요소의 일련번호는 기본적으로 1로 설정됩니다. 그리고 동일한 일련 번호를 가진 하위 요소는 HTML 문서에 로드된 순서대로 정렬됩니다.

먼저 예제를 보고 다음 지식 포인트를 검토해 보겠습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-ordinal-group属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
        }
        div{height:100px;line-height:100px;}
        #box1
        {
            background:red;
            -webkit-box-ordinal-group:2;
        }
        #box2
        {
            background:blue;
            -webkit-box-ordinal-group:3;
        }
        #box3
        {
            background:yellow;
            -webkit-box-ordinal-group:1;
        }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

로그인 후 복사

박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명