zoukankan      html  css  js  c++  java
  • CSS Flex 布局

    .container {
        display: flex;
        width: 800px;
        height: 150px;
    }
    .item {
        font-size: 50px;
        font-weight: 500;
        width: 200px;
        text-align: center;
    }

    一、容器属性,子元素排列

    .container {
        display: flex;
        width: 800px;
        height: 150px;
        flex-direction: row;
    }

    row

     

    row-reverse

     

     column

     

    column-reverse

    二、容器属性,子元素折行

    .container {
        border: 2px solid black;
        display: flex;
        width: 700px;
        height: 150px;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    wrap

    wrap-reverse

     

    三、容器属性,子元素对齐方式

    .container {
        border: 2px solid black;
        display: flex;
        width: 1200px;
        height: 200px;
        flex-direction: row;
        justify-content:start;
    }
    flex-start

    end

     

    center

     

    space-between

     

    space-around

     

    .container {
        border: 2px solid black;
        display: flex;
        width: 1200px;
        height: 200px;
        flex-direction: row;
        align-items: flex-start;
    }

    flex-start

    flex-end

    center

    baseline

     

    stretch (子元素没有指定高度)

    四、子元素属性,空间多余,分配给子元素。默认是0,所有元素都不分配

    <div class="item" style="background-color: aqua;">1</div>
    <div class="item" style="background-color: gold;flex-grow: 2;">2</div>
    <div class="item" style="background-color: hotpink;flex-grow: 1;">3</div>
    <div class="item" style="background-color: GreenYellow;">4</div>
    <div class="item" style="background-color: Indigo;">5</div>
    <div class="item" style="background-color: LightCyan;">6</div>
    <div class="item" style="background-color: SlateGray;">7</div>
    <div class="item" style="background-color: SaddleBrown;">8</div>

     空间不足,需要减少子元素尺寸,默认都是1,平均减少

    <div class="item" style="background-color: aqua;">1</div>
    <div class="item" style="background-color: gold;flex-shrink: 2;">2</div>
    <div class="item" style="background-color: hotpink;">3</div>
    <div class="item" style="background-color: GreenYellow;">4</div>
    <div class="item" style="background-color: Indigo;">5</div>
    <div class="item" style="background-color: LightCyan;">6</div>
    <div class="item" style="background-color: SlateGray;">7</div>
    <div class="item" style="background-color: SaddleBrown;">8</div>

  • 相关阅读:
    [LeetCode#114]Flatten Binary Tree to Linked List
    [LeetCode#103]Binary Tree Zigzag Level Order Traversal
    [LeetCode#102]Binary Tree Level Order Traversal
    [LeetCode#145]Binary Tree Postorder Traversal
    [LeetCode#]Binary Tree Preorder Traversal
    [LeetCode#144]Binary Tree Preorder Traversal
    [LeetCode#94]Binary Tree Inorder Traversal
    [LeetCode#101]Symmetric Tree
    [LeetCode#100]Same Tree
    [LeetCode#104, 111]Maximum Depth of Binary Tree, Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/chenyingzuo/p/15024474.html
Copyright © 2011-2022 走看看