Flexboxの柔軟なレイアウトに関する最初の知り合い

柔軟なレイアウトは非常に一般的であり、習得する必要があります。

フレックス親コンテナのプロパティ

flex-directionプロパティ：サブアイテムの配置方向
フレックスワープ：サブアイテムの複数行
フレックスフローサブアイテムは、複数行で一緒に指定されます
justify-content：水平方向に整列
align-items：垂直方向の配置
align-content：複数行の配置。複数の行に複数の要素行がある場合にのみ機能し、単一行の要素は機能しません

フレックスサブアイテム

注文
フレックスグローサブアイテム拡張率

ここに画像の説明を挿入
3.その他の属性

テストコード
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <!-- <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div> -->
        <!-- <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div> -->
    </div>
</body>
</html>

css

body{
    
    
    background-color: azure;
}

.container{
    
    
    margin: 150px auto;
    max-width: 800px;
    height: 400px;
    padding: 20px;
    background-color: rgb(196, 229, 232);
    border: 10px solid rgb(0, 181, 203);
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    /* flex-flow: row-reverse wrap; */
    justify-content: space-around;
    /* align-items: baseline; */

}

.item{
    
    
    background-color: rgb(0, 181, 203);
    color: white;
    width: 100px;
    height: 100px;
    margin: 2px;
    font-weight: bold;
    font-size: 5em;
    text-align: center; 
}

.item-1{
    
    
    flex-basis: 200px;
    flex-shrink: 1;
}
.item-2{
    
    
    flex-basis: 200px;
    flex-shrink: 1;
}
.item-3 {
    
    
    /* font-size: 3em; */
    /* order: 1; */
    /* flex-grow: 2; */
    flex-basis: 200px;
    flex-shrink: 300;
}

Flexboxの柔軟なレイアウトに関する最初の知り合い

おすすめ