CSS3에서 box-orient 속성을 사용하여 레이아웃 방향을 결정하는 방법은 무엇입니까? (코드 튜토리얼)-CSS 튜토리얼-php.cn

CSS3에서 box-orient 속성을 사용하여 레이아웃 방향을 결정하는 방법은 무엇입니까? (코드 튜토리얼)

云罗郡主

풀어 주다： 2018-10-23 15:52:35

앞으로

2413명이 탐색했습니다.

이 글의 내용은 CSS3의 box-orient 속성을 사용하여 방향을 레이아웃하는 방법에 관한 것입니다. (코드 튜토리얼)에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3 가변 상자 모델에서는 box-orient 속성을 사용하여 가변 상자 내부의 "하위 요소" 배열 방향을 정의할 수 있습니다. 즉, 상자 내부의 하위 요소가 가로로 배열되어 있는지 아니면 세로로 배열되어 있는지를 나타냅니다.

box-orient 속성의 값은 다음과 같습니다:

horizontal 유연한 상자는 "하위 요소"를 "왼쪽에서 오른쪽으로" 수평선에 표시합니다.

vertical 유연한 상자는 "from"에서 수직선에 표시합니다. 위에서 아래로"

inline-axis의 "하위 요소" Flexbox는 "인라인 축을 따라" "하위 요소"를 표시합니다(기본값)

block-axis Flexbox는 "블록 축을 따라" "하위 요소"를 표시합니다. "

참고: 이를 사용하기 전에 사용자는 상위 요소의 표시 속성을 box 또는 inline-box로 설정해야 유연한 상자 모델이 적용됩니다.

예:

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

로그인 후 복사

CSS3에서 box-orient 속성을 사용하여 레이아웃 방향을 결정하는 방법은 무엇입니까? (코드 튜토리얼)