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

× 目次 [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>