CSS : Flex

7341 ワード
テキストリンク

Flex


Webレイアウトの分割
レイアウトレイアウト機能に重点を置いて作成し、基本的な方法よりも簡単につなぎ合わせることができます.
基本
html
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div class="container">
            <div class=box1>layout1</div>
            <div class=box2>layout2</div>
            <div class=box3>layout3</div>
        </div>
</body>
</html>
CSS
.container {
    height: 100vh;
    background: lightslategray;
}

.box1 {
    background: thistle;
    border: 3px solid red;
}


.box2 {
    background: palegreen;
    border: 3px solid blue;
}

.box3 {
    background: thistle;
    border: 3px solid black;
}

display:Flexの追加

.container {
    height: 100vh;
    background: lightslategray;
    display: flex;
}

.box1 {
    background: thistle;
    border: 3px solid red;
}


.box2 {
    background: palegreen;
    border: 3px solid blue;
}

.box3 {
    background: thistle;
    border: 3px solid black;
}

flex-direction:列ソート(デフォルトはrow)



flex-dorient:column-reverse(reverseを追加すると逆方向に移動)



flex-wrap:wrap(デフォルトはnowrap)


コンテナが内部アイテムより小さい場合の表示方法を指定します
表示を容易にするために、レイアウトの高さを300 px幅に設定します.
デフォルト値に減少した場合(nowrap)

wrap値の使用と減少時

videifical-content:center(デフォルトはflex-start)


videfineキーワードは並べ替え方向に棒(軸)が1本あると便利に考えられます
flex-end

center

スペース-レイアウト間の距離を一定に保つ

space-bround左右一定ピッチ

align-items:center(デフォルトstretch)


rivalが整列方向である場合、alignは整列方向に垂直なロッド(軸)である.
flex-start

flex-end

center

flex:数値


全体を空白と認識してからパーセンテージで割る
cssコードを簡単に変更
.container {
    height: 100vh;
    background: lightslategray;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.box1:nth-child(1){
    flex: 1;
}
.box2:nth-child(2){
    flex: 2;
}
.box3:nth-child(3){
    flex: 1;
}

.box1 {
    background: thistle;
    width: 300px;
    border: 3px solid red;
}


.box2 {
    background: palegreen;
    width: 300px;
    border: 3px solid blue;
}

.box3 {
    background: thistle;
    width: 300px;
    border: 3px solid black;
}

flex:1を与えると、flex値を与える場所が増えると考えられます.
.container {
    height: 100vh;
    background: lightslategray;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.box3:nth-child(3){
    flex-grow: 1;
}

.box1 {
    background: thistle;
    width: 300px;
    border: 3px solid red;
}


.box2 {
    background: palegreen;
    width: 300px;
    border: 3px solid blue;
}

.box3 {
    background: thistle;
    width: 300px;
    border: 3px solid black;
}

その他align-sself(個人位置設定)、order(置換位置)
参照https://blueshw.github.io/2019/07/28/advanced-flexbox/
Fluth実習
dockerデータボリュームvolumeのバックアップ、リカバリ、または移行