CSS3 フレキシブルボックス Model_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 フレキシブルボックス Model_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:35:57

オリジナル

1014 人が閲覧しました

フレキシブルボックスモデル

フレキシブルボックスモデルを使用する場合は、親要素に display: box; または display: inline-box-orient を追加する必要があります。ボックスモデルのレイアウト方向、水平表示を定義します。、縦縦表示

<style>　　.box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}　　.box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>

ログイン後にコピー

要素の配置順序 box-direction: Normal、reverse(逆順)

<style>　　.box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse;}　　.box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>

ログイン後にコピー

要素の配置順序,box-ordinal-group:123...要素の特定の配置順序を設定します

<style>　　.box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}　　.box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;} .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;} .box div:nth-of-type(2) {-webkit-box-ordinal-group: 3;} .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>

ログイン後にコピー

フレキシブルボックスモデル (2)、box-flex はボックスのフレキシブルな空間を定義し、ボックス内の各 div のシェアを定義します。子要素のサイズ = ボックスのサイズ * 子要素の box-flex 属性値 / すべての子要素の box-flex 属性値の合計

<style>　　.box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}　　.box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;} .box div:nth-of-type(1) {-webkit-box-flex: 1;} .box div:nth-of-type(2) {-webkit-box-flex: 2;} .box div:nth-of-type(3) {-webkit-box-flex: 3;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>

ログイン後にコピー

box-pack はボックスに水平方向の十分なスペースを提供します管理するには、属性値は次のとおりです: start (右側の豊富なスペース)、end (左側の豊富なスペース)、center (両側の豊富なスペース) )、justify (リッチスペースが要素間のギャップに均等に分配されます)

<style>　　.box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-box-pack: end;}　　.box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>

ログイン後にコピー

box-align は、要素の垂直方向の位置を管理します。 start (リッチスペースが下部にあります) の 3 つの属性値があります。 )、端 (上部の豊かなスペース)、中心 (垂直方向の中央)
ボックスモデルシャドウボックス-シャドウ: [挿入] x、y、ぼかし、[スプレッド]、色: 投影法 (内部投影); , y: 影のオフセット; ぼかし: ぼかしの半径; 広がり: 影の半径を拡大します (特定のピクセルの後にぼやけます); 4 つの方向: 上、下、左、右。、左、右)、水平 (水平方向にドラッグ可能)、垂直方向 (垂直方向にドラッグ可能) ; オーバーフローで使用する必要があります: auto

<style>    .box {width: 100px; height: 100px; margin: 100px; background: red; box-shadow: 10px 10px 30px blue;}</style><body> <div class="box"></div></body>

ログイン後にコピー