ホームページ > 記事 > ウェブフロントエンド > CSS3 の box-orient プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)
CSS3 の box-orient プロパティを使用してレイアウトの方向を決定するにはどうすればよいですか? (コードチュートリアル)
- 云罗郡主転載
- 2018-10-23 15:52:352450ブラウズ
この記事の内容は、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>
分析:
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 サイトの他の関連記事を参照してください。