×
  • 的CSS Flexbox–完整的初学者指南

  • 对齐内容

    课程清单

    可以应用于flex容器的最后一个属性是align content属性。属性将内容线与交叉轴对齐,这是对齐内容和对齐项目的混合。它沿横轴分布额外的空间。

    注意: Before we start the container must contain height and width then 上 ly this property is applied also the flex-wrap: wrap property must also applied to the flex container.

    伸展 –对齐内容默认值

    style.css
    
    .container {
        display: flex;
        flex-wrap:wrap
        height: 160px;
        width:300px;
    }
    .align-content-stretch {
      align-content: stretch;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-stretch"> ...
    </div>
    

    之后,我们将显示的是:
    对齐内容-拉伸


    弹性启动

    因此,我们可以指定的第二个值是flex-start。这会将线拉到十字轴的起点。

    style.css
    
    .align-content-start {
      align-content: flex-start;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-start"> ...
    </div>
    

    之后,我们将显示的是:
    对齐内容-灵活启动


    柔性端

    与flex-start类似,我们也有flex-end。弯曲末端将项目推到横轴的末端。

    style.css
    
    .align-content-end {
      align-content: 柔性端;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-end"> ...
    </div>
    

    之后,我们将显示的是:
    柔性端


    居中对齐

    另一个值是center,它使内容在横轴上居中。

    style.css
    
    .align-content-center {
      align-content: 中央;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-center"> ...
    </div>
    

    之后,我们将显示的是:
    中央


    之间的空间

    另一个值是“间隔之间”,它占用所有多余的空间并放在行之间。

    style.css
    
    .align-content-space-between {
      align-content: 间隔;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-space-between"> ...
    </div>
    

    之后,我们将显示的是:
    间隔


    周围空间

    最后,我们还拥有“周围的空间”,用于围绕线分布空间。因此中心部分的空间是边缘的两倍。

    style.css
    
    .align-content-space-around {
      align-content: 周围空间;
    }
    

    和html将是:

    index.html
    
    <div class="container align-content-space-around"> ...
    </div>
    

    之后,我们将显示的是:
     周围空间


    演示

    看笔
    对齐内容属性-Flex
    由rehmaanali(@geekstrick)
    密码笔.

    对齐内容属性
    .
    .
  • 启用通知    不用了,谢谢