CSS3のフレキシブルボックスモデルの詳細説明

フレックスボックスを使用すると、通常、子要素のレイアウトをより適切に操作できます。例:

要素コンテナに十分なスペースがない場合、各要素の幅を計算せずに同じ行に要素を設定できます。

列内にすばやく配置できます。

コンテナの左、右、中央などに簡単に配置できます。

要素コンテナの構造を変更せずに、表示順序を変更できます。パーセンテージとウィンドウ サイズの変更を設定する必要はありません。コンテナ内の各子要素にはコンテナの幅または高さの比率が自動的に割り当てられるため、要素の正確な幅を指定しないとレイアウトが崩れることに注意してください。

ハイライト:

適応幅。開発は table や float よりもはるかに便利で高速です。

ノートの互換性:

.nav{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width:100%;//火狐不加宽度是无效的
}
.nav a{
    display: block;
    height:40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
    border:1px solid #fff;
    background: #f60;
    text-decoration: none;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
        -o-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

以上がCSS3のフレキシブルボックスモデルの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。