• demo:flex每个属性展示

     box:
            flex-direction                默认row横轴，column纵轴
            flex-wrap                       默认nowrap,换行方式
            flex-flow                        flex-direction flex-wrap 缩写
            justify-content                主轴上的对齐方式
            align-items                    默认：stretch伸展  子项在交叉轴上对齐方式
            align-content                  默认：stretch伸展，多个项目多根轴线的对齐方式，只有一个轴线时没有作用
    item:
            order                                默认0：排列顺序
            flex-grow                        默认0：决定项目放大，将剩余的空间平局分配
            flex-shrink                        默认1：决定项目缩小比例，将超出的空间，平均缩小
            flex-basis                        默认auto,分配前置主轴上的空间大小
            flex                                flex-grow flex-shrink flex-basis三个属性的简写方式
            align-self                        覆盖align-items排列方式，单独排列方式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>flex布局</title>
    9.     <style>
    10.         h2 {
    11.             text-align: center;
    12.         }
    13.  
    14.         .flex {
    15.             width: 500px;
    16.             margin: 30px auto;
    17.             background: #cccccc;
    18.         }
    19.  
    20.         .box {
    21.             width: 30px;
    22.             height: 30px;
    23.             margin: 10px;
    24.             background: #333;
    25.             text-align: center;
    26.             line-height: 30px;
    27.             color: #fff;
    28.         }
    29.  
    30.         .flex1 {
    31.             display: flex;
    32.             flex-direction: row;
    33.         }
    34.  
    35.         .flex2 {
    36.             display: flex;
    37.             flex-direction: row-reverse;
    38.         }
    39.  
    40.         .flex3 {
    41.             display: flex;
    42.             flex-direction: column;
    43.         }
    44.  
    45.         .flex4 {
    46.             display: flex;
    47.             flex-direction: column-reverse;
    48.         }
    49.  
    50.         .flex5 {
    51.             display: flex;
    52.             flex-wrap: nowrap;
    53.         }
    54.  
    55.         .flex6 {
    56.             display: flex;
    57.             flex-wrap: wrap;
    58.         }
    59.  
    60.         .flex7 {
    61.             display: flex;
    62.             flex-wrap: wrap-reverse;
    63.         }
    64.  
    65.         .flex8 {
    66.             display: flex;
    67.             justify-content: flex-start;
    68.         }
    69.  
    70.         .flex9 {
    71.             display: flex;
    72.             justify-content: flex-end;
    73.         }
    74.  
    75.         .flex10 {
    76.             display: flex;
    77.             justify-content: center;
    78.         }
    79.  
    80.         .flex11 {
    81.             display: flex;
    82.             justify-content: space-between;
    83.         }
    84.  
    85.         .flex12 {
    86.             display: flex;
    87.             justify-content: space-around;
    88.         }
    89.  
    90.         .flex13 {
    91.             display: flex;
    92.             justify-content: space-evenly;
    93.         }
    94.  
    95.         .flex14 {
    96.             display: flex;
    97.             justify-content: space-evenly;
    98.             align-items: flex-start;
    99.         }
    100.  
    101.         .flex15 {
    102.             display: flex;
    103.             justify-content: space-evenly;
    104.             align-items: flex-end;
    105.         }
    106.  
    107.         .flex16 {
    108.             display: flex;
    109.             justify-content: space-evenly;
    110.             align-items: center;
    111.         }
    112.  
    113.         .flex17 {
    114.             display: flex;
    115.             justify-content: space-evenly;
    116.             align-items: baseline;
    117.         }
    118.  
    119.         .flex18 {
    120.             display: flex;
    121.             justify-content: space-evenly;
    122.             align-items: stretch;
    123.         }
    124.  
    125.         .flex19 {
    126.             display: flex;
    127.             height: 240px;
    128.             flex-wrap: wrap;
    129.             align-content: flex-start;
    130.         }
    131.  
    132.         .flex20 {
    133.             display: flex;
    134.             height: 240px;
    135.             flex-wrap: wrap;
    136.             align-content: flex-end;
    137.         }
    138.  
    139.         .flex21 {
    140.             height: 240px;
    141.             display: flex;
    142.             flex-wrap: wrap;
    143.             align-content: center;
    144.         }
    145.  
    146.         .flex22 {
    147.             height: 240px;
    148.             display: flex;
    149.             flex-wrap: wrap;
    150.             align-content: space-between;
    151.         }
    152.  
    153.         .flex23 {
    154.             height: 240px;
    155.             display: flex;
    156.             flex-wrap: wrap;
    157.             align-content: space-around;
    158.         }
    159.  
    160.         .flex24 {
    161.             height: 240px;
    162.             display: flex;
    163.             flex-wrap: wrap;
    164.             align-content: stretch;
    165.         }
    166.  
    167.         .flex25 {
    168.             display: flex;
    169.             flex-direction: row;
    170.         }
    171.  
    172.         .flex25>.box5 {
    173.             order: -5;
    174.         }
    175.  
    176.         .flex26 {
    177.             display: flex;
    178.             flex-direction: row;
    179.         }
    180.  
    181.         .flex26>.box3 {
    182.             flex-grow: 3;
    183.         }
    184.  
    185.         .flex27 {
    186.             display: flex;
    187.             flex-direction: row;
    188.         }
    189.  
    190.         .flex27>.box {
    191.             flex: 1;
    192.         }
    193.  
    194.         .flex27>.box3 {
    195.             flex: 0;
    196.         }
    197.  
    198.         .flex28 {
    199.             height: 150px;
    200.             display: flex;
    201.             justify-content: space-evenly;
    202.         }
    203.         .flex28>.box3{
    204.             align-items: auto;
    205.         }
    206.         .flex29 {
    207.             height: 150px;
    208.             display: flex;
    209.             justify-content: space-evenly;
    210.         }
    211.         .flex29>.box3{
    212.             align-self: flex-start;
    213.         }
    214.         .flex30 {
    215.             height: 150px;
    216.             display: flex;
    217.             justify-content: space-evenly;
    218.         }
    219.         .flex30>.box3{
    220.             align-self: flex-end;
    221.         }
    222.         .flex31 {
    223.             height: 150px;
    224.             display: flex;
    225.             justify-content: space-evenly;
    226.         }
    227.         .flex31>.box3{
    228.             align-self: center;
    229.         }
    230.         .flex32 {
    231.             height: 150px;
    232.             display: flex;
    233.             justify-content: space-evenly;
    234.         }
    235.         .flex32>.box3{
    236.             line-height: 50px;
    237.             align-self: baseline;
    238.         }
    239.     </style>
    240. </head>
    241.  
    242. <body>
    243.     <h2>1.flex-direction: row</h2>
    244.     <div class="flex flex1">
    245.         <div class="box">1</div>
    246.         <div class="box">2</div>
    247.         <div class="box">3</div>
    248.         <div class="box">4</div>
    249.         <div class="box">5</div>
    250.     </div>
    251.     <h2>2.flex-direction: row-reverse</h2>
    252.     <div class="flex flex2">
    253.         <div class="box">1</div>
    254.         <div class="box">2</div>
    255.         <div class="box">3</div>
    256.         <div class="box">4</div>
    257.         <div class="box">5</div>
    258.     </div>
    259.     <h2>3.flex-direction: column</h2>
    260.     <div class="flex flex3">
    261.         <div class="box">1</div>
    262.         <div class="box">2</div>
    263.         <div class="box">3</div>
    264.         <div class="box">4</div>
    265.         <div class="box">5</div>
    266.     </div>
    267.     <h2>4.flex-direction: column-reverse</h2>
    268.     <div class="flex flex4">
    269.         <div class="box">1</div>
    270.         <div class="box">2</div>
    271.         <div class="box">3</div>
    272.         <div class="box">4</div>
    273.         <div class="box">5</div>
    274.     </div>
    275.     <h2>5.flex-wrap: nowrap</h2>
    276.     <div class="flex flex5">
    277.         <div class="box">1</div>
    278.         <div class="box">2</div>
    279.         <div class="box">3</div>
    280.         <div class="box">4</div>
    281.         <div class="box">5</div>
    282.         <div class="box">5</div>
    283.         <div class="box">5</div>
    284.         <div class="box">5</div>
    285.         <div class="box">5</div>
    286.         <div class="box">5</div>
    287.         <div class="box">5</div>
    288.         <div class="box">5</div>
    289.         <div class="box">5</div>
    290.     </div>
    291.     <h2>6.flex-wrap: wrap</h2>
    292.     <div class="flex flex6">
    293.         <div class="box">1</div>
    294.         <div class="box">2</div>
    295.         <div class="box">3</div>
    296.         <div class="box">4</div>
    297.         <div class="box">5</div>
    298.         <div class="box">5</div>
    299.         <div class="box">5</div>
    300.         <div class="box">5</div>
    301.         <div class="box">5</div>
    302.         <div class="box">5</div>
    303.         <div class="box">5</div>
    304.         <div class="box">5</div>
    305.         <div class="box">5</div>
    306.     </div>
    307.     <h2>7.flex-wrap: wrap-reverse</h2>
    308.     <div class="flex flex7">
    309.         <div class="box">1</div>
    310.         <div class="box">2</div>
    311.         <div class="box">3</div>
    312.         <div class="box">4</div>
    313.         <div class="box">5</div>
    314.         <div class="box">5</div>
    315.         <div class="box">5</div>
    316.         <div class="box">5</div>
    317.         <div class="box">5</div>
    318.         <div class="box">5</div>
    319.         <div class="box">5</div>
    320.         <div class="box">5</div>
    321.         <div class="box">5</div>
    322.     </div>
    323.     <h2>8.justify-content: flex-start</h2>
    324.     <div class="flex flex8">
    325.         <div class="box">1</div>
    326.         <div class="box">2</div>
    327.         <div class="box">3</div>
    328.         <div class="box">4</div>
    329.         <div class="box">5</div>
    330.     </div>
    331.     <h2>9.justify-content: flex-end</h2>
    332.     <div class="flex flex9">
    333.         <div class="box">1</div>
    334.         <div class="box">2</div>
    335.         <div class="box">3</div>
    336.         <div class="box">4</div>
    337.         <div class="box">5</div>
    338.     </div>
    339.     <h2>10.justify-content: center</h2>
    340.     <div class="flex flex10">
    341.         <div class="box">1</div>
    342.         <div class="box">2</div>
    343.         <div class="box">3</div>
    344.         <div class="box">4</div>
    345.         <div class="box">5</div>
    346.     </div>
    347.     <h2>11.justify-content: space-between</h2>
    348.     <div class="flex flex11">
    349.         <div class="box">1</div>
    350.         <div class="box">2</div>
    351.         <div class="box">3</div>
    352.         <div class="box">4</div>
    353.         <div class="box">5</div>
    354.     </div>
    355.     <h2>12.justify-content: space-around</h2>
    356.     <div class="flex flex12">
    357.         <div class="box">1</div>
    358.         <div class="box">2</div>
    359.         <div class="box">3</div>
    360.         <div class="box">4</div>
    361.         <div class="box">5</div>
    362.     </div>
    363.     <h2>13.justify-content: space-evenly</h2>
    364.     <div class="flex flex13">
    365.         <div class="box">1</div>
    366.         <div class="box">2</div>
    367.         <div class="box">3</div>
    368.         <div class="box">4</div>
    369.         <div class="box">5</div>
    370.     </div>
    371.     <h2>14.align-items: flex-start</h2>
    372.     <div class="flex flex14">
    373.         <div class="box" style="height: 25px">1</div>
    374.         <div class="box" style="height: 40px">2</div>
    375.         <div class="box" style="height: 50px">3</div>
    376.         <div class="box" style="height: 60px">4</div>
    377.         <div class="box" style="height: 55px">5</div>
    378.     </div>
    379.     <h2>15.align-items: flex-end</h2>
    380.     <div class="flex flex15">
    381.         <div class="box" style="height: 25px">1</div>
    382.         <div class="box" style="height: 40px">2</div>
    383.         <div class="box" style="height: 50px">3</div>
    384.         <div class="box" style="height: 60px">4</div>
    385.         <div class="box" style="height: 55px">5</div>
    386.     </div>
    387.     <h2>16.align-items: center</h2>
    388.     <div class="flex flex16">
    389.         <div class="box" style="height: 25px">1</div>
    390.         <div class="box" style="height: 40px">2</div>
    391.         <div class="box" style="height: 50px">3</div>
    392.         <div class="box" style="height: 60px">4</div>
    393.         <div class="box" style="height: 55px">5</div>
    394.     </div>
    395.     <h2>17.align-items: baseline</h2>
    396.     <div class="flex flex17">
    397.         <div class="box" style="height: 25px">1</div>
    398.         <div class="box" style="height: 40px">2</div>
    399.         <div class="box" style="height: 50px">3</div>
    400.         <div class="box" style="height: 60px">4</div>
    401.         <div class="box" style="height: 55px">5</div>
    402.     </div>
    403.     <h2>18.align-items: stretch</h2>
    404.     <div class="flex flex18">
    405.         <div class="box" style="height: auto">1</div>
    406.         <div class="box" style="height: auto">2</div>
    407.         <div class="box" style="height: auto">3</div>
    408.         <div class="box" style="height: auto">4</div>
    409.         <div class="box" style="height: auto">5</div>
    410.     </div>
    411.     <h2>19.align-content: flex-start</h2>
    412.     <div class="flex flex19">
    413.         <div class="box" style="height: 25px">1</div>
    414.         <div class="box" style="height: 40px">2</div>
    415.         <div class="box" style="height: 50px">3</div>
    416.         <div class="box" style="height: 60px">4</div>
    417.         <div class="box" style="height: 55px">5</div>
    418.         <div class="box" style="height: 25px">6</div>
    419.         <div class="box" style="height: 40px">7</div>
    420.         <div class="box" style="height: 50px">8</div>
    421.         <div class="box" style="height: 60px">9</div>
    422.         <div class="box" style="height: 55px">10</div>
    423.         <div class="box" style="height: 25px">11</div>
    424.         <div class="box" style="height: 40px">12</div>
    425.         <div class="box" style="height: 50px">13</div>
    426.         <div class="box" style="height: 60px">14</div>
    427.         <div class="box" style="height: 55px">15</div>
    428.     </div>
    429.     <h2>20.align-content: flex-end</h2>
    430.     <div class="flex flex20">
    431.         <div class="box" style="height: 25px">1</div>
    432.         <div class="box" style="height: 40px">2</div>
    433.         <div class="box" style="height: 50px">3</div>
    434.         <div class="box" style="height: 60px">4</div>
    435.         <div class="box" style="height: 55px">5</div>
    436.         <div class="box" style="height: 25px">6</div>
    437.         <div class="box" style="height: 40px">7</div>
    438.         <div class="box" style="height: 50px">8</div>
    439.         <div class="box" style="height: 60px">9</div>
    440.         <div class="box" style="height: 55px">10</div>
    441.         <div class="box" style="height: 25px">11</div>
    442.         <div class="box" style="height: 40px">12</div>
    443.         <div class="box" style="height: 50px">13</div>
    444.         <div class="box" style="height: 60px">14</div>
    445.         <div class="box" style="height: 55px">15</div>
    446.     </div>
    447.     <h2>21.align-content: center</h2>
    448.     <div class="flex flex21">
    449.         <div class="box" style="height: 25px">1</div>
    450.         <div class="box" style="height: 40px">2</div>
    451.         <div class="box" style="height: 50px">3</div>
    452.         <div class="box" style="height: 60px">4</div>
    453.         <div class="box" style="height: 55px">5</div>
    454.         <div class="box" style="height: 25px">6</div>
    455.         <div class="box" style="height: 40px">7</div>
    456.         <div class="box" style="height: 50px">8</div>
    457.         <div class="box" style="height: 60px">9</div>
    458.         <div class="box" style="height: 55px">10</div>
    459.         <div class="box" style="height: 25px">11</div>
    460.         <div class="box" style="height: 40px">12</div>
    461.         <div class="box" style="height: 50px">13</div>
    462.         <div class="box" style="height: 60px">14</div>
    463.         <div class="box" style="height: 55px">15</div>
    464.     </div>
    465.     <h2>22.align-content: space-between</h2>
    466.     <div class="flex flex22">
    467.         <div class="box" style="height: 25px">1</div>
    468.         <div class="box" style="height: 40px">2</div>
    469.         <div class="box" style="height: 50px">3</div>
    470.         <div class="box" style="height: 60px">4</div>
    471.         <div class="box" style="height: 55px">5</div>
    472.         <div class="box" style="height: 25px">6</div>
    473.         <div class="box" style="height: 40px">7</div>
    474.         <div class="box" style="height: 50px">8</div>
    475.         <div class="box" style="height: 60px">9</div>
    476.         <div class="box" style="height: 55px">10</div>
    477.         <div class="box" style="height: 25px">11</div>
    478.         <div class="box" style="height: 40px">12</div>
    479.         <div class="box" style="height: 50px">13</div>
    480.         <div class="box" style="height: 60px">14</div>
    481.         <div class="box" style="height: 55px">15</div>
    482.     </div>
    483.     <h2>23.align-content: space-around</h2>
    484.     <div class="flex flex23">
    485.         <div class="box" style="height: 25px">1</div>
    486.         <div class="box" style="height: 40px">2</div>
    487.         <div class="box" style="height: 50px">3</div>
    488.         <div class="box" style="height: 60px">4</div>
    489.         <div class="box" style="height: 55px">5</div>
    490.         <div class="box" style="height: 25px">6</div>
    491.         <div class="box" style="height: 40px">7</div>
    492.         <div class="box" style="height: 50px">8</div>
    493.         <div class="box" style="height: 60px">9</div>
    494.         <div class="box" style="height: 55px">10</div>
    495.         <div class="box" style="height: 25px">11</div>
    496.         <div class="box" style="height: 40px">12</div>
    497.         <div class="box" style="height: 50px">13</div>
    498.         <div class="box" style="height: 60px">14</div>
    499.         <div class="box" style="height: 55px">15</div>
    500.     </div>
    501.     <h2>24.align-content: stretch</h2>
    502.     <div class="flex flex24">
    503.         <div class="box" style="height: 25px">1</div>
    504.         <div class="box" style="height: 40px">2</div>
    505.         <div class="box" style="height: 50px">3</div>
    506.         <div class="box" style="height: 60px">4</div>
    507.         <div class="box" style="height: 55px">5</div>
    508.         <div class="box" style="height: 25px">6</div>
    509.         <div class="box" style="height: 40px">7</div>
    510.         <div class="box" style="height: 50px">8</div>
    511.         <div class="box" style="height: 60px">9</div>
    512.         <div class="box" style="height: 55px">10</div>
    513.         <div class="box" style="height: 25px">11</div>
    514.         <div class="box" style="height: 40px">12</div>
    515.         <div class="box" style="height: 50px">13</div>
    516.         <div class="box" style="height: 60px">14</div>
    517.         <div class="box" style="height: 55px">15</div>
    518.     </div>
    519.     <h2>1. order (项目5的order值为 -1)</h2>
    520.     <div class="flex flex25">
    521.         <div class="box box1">1</div>
    522.         <div class="box box2">2</div>
    523.         <div class="box box3">3</div>
    524.         <div class="box box4">4</div>
    525.         <div class="box box5">5</div>
    526.     </div>
    527.     <h2>2. flex-grow (项目3的值为3)</h2>
    528.     <div class="flex flex26">
    529.         <div class="box box1">1</div>
    530.         <div class="box box2">2</div>
    531.         <div class="box box3">3</div>
    532.         <div class="box box4">4</div>
    533.         <div class="box box5">5</div>
    534.     </div>
    535.     <h2>3. flex-shrink (项目3的值为0)</h2>
    536.     <div class="flex flex27">
    537.         <div class="box box1">1</div>
    538.         <div class="box box2">2</div>
    539.         <div class="box box3">3</div>
    540.         <div class="box box4">4</div>
    541.         <div class="box box5">5</div>
    542.     </div>
    543.     <h2>4. align-self: auto</h2>
    544.     <div class="flex flex28">
    545.         <div class="box box1" style="height: 25px">1</div>
    546.         <div class="box box2" style="height: 40px">2</div>
    547.         <div class="box box3" style="height: 50px">3</div>
    548.         <div class="box box4" style="height: 60px">4</div>
    549.         <div class="box box5" style="height: 55px">5</div>
    550.     </div>
    551.     <h2>5. align-self: flex-start</h2>
    552.     <div class="flex flex29">
    553.         <div class="box box1" style="height: 25px">1</div>
    554.         <div class="box box2" style="height: 40px">2</div>
    555.         <div class="box box3" style="height: 50px">3</div>
    556.         <div class="box box4" style="height: 60px">4</div>
    557.         <div class="box box5" style="height: 55px">5</div>
    558.     </div>
    559.     <h2>6. align-self: flex-end</h2>
    560.     <div class="flex flex30">
    561.         <div class="box box1" style="height: 25px">1</div>
    562.         <div class="box box2" style="height: 40px">2</div>
    563.         <div class="box box3" style="height: 50px">3</div>
    564.         <div class="box box4" style="height: 60px">4</div>
    565.         <div class="box box5" style="height: 55px">5</div>
    566.     </div>
    567.     <h2>7. align-self: center</h2>
    568.     <div class="flex flex31">
    569.         <div class="box box1" style="height: 25px">1</div>
    570.         <div class="box box2" style="height: 40px">2</div>
    571.         <div class="box box3" style="height: 50px">3</div>
    572.         <div class="box box4" style="height: 60px">4</div>
    573.         <div class="box box5" style="height: 55px">5</div>
    574.     </div>
    575.     <h2>8. align-self: baseline</h2>
    576.     <div class="flex flex32">
    577.         <div class="box box1" style="height: 25px">1</div>
    578.         <div class="box box2" style="height: 40px">2</div>
    579.         <div class="box box3" style="height: 50px">3</div>
    580.         <div class="box box4" style="height: 60px">4</div>
    581.         <div class="box box5" style="height: 55px">5</div>
    582.     </div>
    583. </body>
    584.  
    585. </html>

  • 相关阅读:
    CSS3层叠样式表
    Nginx配置详细解释：(6)实现反向代理服务器,动静分离,负载均衡
    jupyter 基本用法
    ES挂载不上怎么处理？
    关于埋点上报
    实现内网穿透的最佳解决方案（无实名认证，完全免费）
    SpringBoot 使用Logback日志框架
    阿里巴巴高并发架构，到底如何对抗双十一亿级并发流量
    在 BSV 上基于 Zokrates 的 zkSNARKs 应用开发流程简介
    2022年危险化学品经营单位安全管理人员考题及答案
  • 原文地址：https://blog.csdn.net/weixin_41127362/article/details/127750433