CSS3 の box-orient プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)-CSSチュートリアル-php.cn

CSS3 の box-orient プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)

云罗郡主

リリース： 2018-10-23 15:52:35

転載

2433 人が閲覧しました

この記事の内容は、CSS3のbox-orient属性を使って方向をレイアウトする方法についてです。 (コードチュートリアル) は、必要な友人に参考にしていただけると幸いです。

CSS3 フレキシブルボックスモデルでは、box-orient 属性を使用して、フレキシブルボックス内の「子要素」の配置方向を定義できます。つまり、ボックス内の子要素が水平に配置されるか垂直に配置されるかということです。

box-orient 属性の値は次のとおりです。

horizontal フレキシブルボックスは、その「子要素」を水平線上に「左から右」に表示します

垂直フレキシブルボックス" その「子要素」を上から下に垂直線で表示します

inline-axis フレックスボックスはその「子要素」を「インライン軸に沿って」表示します (デフォルト値)

block-axis フレキシブルボックスは、その「子要素」を「ブロック軸に沿って」表示します

注: 使用する前に、ユーザーはまず親要素の表示属性を 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 プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)

分析:

CSS2.1 では、HTML ドキュメントの流れの方向は「上から下」です。しかし、フレキシブルボックスモデルを使用した後は、ドキュメントフローの方向を「左から右」に再定義できます。フレキシブルボックスモデルを有効にしたい場合は、親要素の表示属性値をボックス（またはインラインボックス）に設定する必要があります。

従来のレイアウトモードでは、並べて表示するように定義された 3 つの列ブロックがインラインブロック (display:inline-block;) またはインライン要素 (display:inline;) として表示される場合、同じことができます。デザイン効果は得られますが、ディスプレイ技術はまったく異なります。

「display:-webkit-box;」は、webkit カーネルブラウザと互換性があります。moz カーネルブラウザの場合は、「display:-moz-box;」と記述する必要があります。「-moz-display: box;」ではなく「display: -moz-box;」であることに注意してください。

この例では、フレキシブルボックス内の「子要素」の幅がコンテンツによって拡張されます。コンテンツが存在しない場合、「子要素」には幅がありません。もちろん、「子要素」に特定の幅を定義することもできます。

上記は、CSS3 の box-orient 属性を使用して方向をレイアウトする方法についてです。 (コードチュートリアル) の完全な紹介。CSS3 ビデオチュートリアルについて詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がCSS3 の box-orient プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。