Layout_html/css_WEB-ITnose での CSS フレキシブルボックスモデルフレックスの適用-htmlチュートリアル-php.cn

Layout_html/css_WEB-ITnose での CSS フレキシブルボックスモデルフレックスの適用

WBOY

リリース： 2016-06-24 11:17:11

オリジナル

1337 人が閲覧しました

× 目次 [1] 要素の中央揃え [2] 両端揃え [3] 下揃え [4] 入力ボックスボタン [5] 均等配置 [6] アダプティブレイアウト [7] 吊り下げレイアウト [8] フル画面レイアウト

前の単語

フレックスボックスモデルの基本的な構文と互換性のある記述方法については、以前に詳しく紹介しました

要素のセンタリング

【1】main を使用します。スケーラブルコンテナ上での軸揃え -content と軸間の揃え align-items

<style>.parent{    display: flex;    justify-content: center;    align-items: center;}</style>

ログイン後にコピー

<div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

ログイン後にコピー

【2】margin:auto

<style>.parent{    display: flex;}.in{    margin: auto;}</style>

ログイン後にコピー

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

ログイン後にコピー

を使用

両端を揃える

<style>.parent{    display: flex;    justify-content:space-between}</style>

ログイン後にコピー

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>    <div class="in" style="background-color: lightgreen;">DEMO</div>    <div class="in" style="background-color: lightcyan;">DEMO</div>    <div class="in" style="background-color: lightseagreen;">DEMO</div>      </div>

ログイン後にコピー

下揃え

<style>.parent{    display: flex;    align-items: flex-end;}</style>

ログイン後にコピー

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue; height:20px;">DEMO</div>    <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>    <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>    <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>      </div>

ログイン後にコピー

入力ボックスボタン

<style>.inputBox{    display: flex;    width: 250px;}.inputBox-ipt{    flex: 1;}</style>

ログイン後にコピー

<div class="inputBox">  <input class="inputBox-ipt">  <button class="inputBox-btn">按钮</button></div>

ログイン後にコピー

均等配分

<style>body,p{margin: 0;}.parent{    display: flex;}.child{    flex:1;    height: 100px;}.child + .child{    margin-left: 20px;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: lightblue;">1</div>    <div class="child" style="background-color: lightgreen;">2</div>    <div class="child" style="background-color: lightsalmon;">3</div>    <div class="child" style="background-color: pink;">4</div>                </div>

ログイン後にコピー

複数列アダプティブレイアウト

<style>p{margin: 0;}.parent{display: flex;}.left,.center{margin-right: 20px;}.right{flex: 1;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>        <p>left</p>    </div>                <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>                <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>                    </div>

ログイン後にコピー

吊り下げレイアウト

<style>        .box{    display: flex;    background-color: lightgrey;    width: 300px;}.left{    margin-right: 20px;    background-color: lightblue;    height: 30px;}.main{    flex:1;}</style>

ログイン後にコピー

<div class="box">    <div class="left">左侧悬挂</div>    <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>    </div>

ログイン後にコピー

全画面レイアウト

rree

<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{    display: flex;    flex-direction: column;}.top,.bottom{    height: 50px;}.middle{    display: flex;    flex: 1;}.left{    width: 100px;    margin-right: 20px;}.right{    flex: 1;    overflow: auto;}.right-in{    height: 1000px;}</style>

ログイン後にコピー