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

  • 证明内容合理

    课程清单

    在本教程中,我们将研究flex容器提供的alignment属性,该属性从justify-content开始。

    默认值

    默认情况下,justify-content设置为flex-start的值,该选项将项目放置在主轴的起点。

    style.css
    
    .container {
      display: flex;
      justify-content: flex-start;   /* 默认值 */
    }
    

    由于主轴从左向右流动,因此默认情况下项目从左开始


    柔性端

    这将使该项目放置在主轴的末端。

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

    标记将是:

    index.html
    
    <div class="container d-flex justify-flex-end">
      ...
    </div>
    

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


    居中对齐

    也可以将内容对齐到主轴的中心,并且该属性的值为

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

    标记将是:

    index.html
    
    <div class="container d-flex justify-center">
      ...
    </div>
    

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


    之间的空间

    Flexbox还提供了附加值,该附加值可以控制必须如何分配额外空间,因此具有一定的间隔值。

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

    标记将是:

    index.html
    
    <div class="container d-flex justify-space-between">
      ...
    </div>
    

    之后,我们将显示的是:
    间隔
    您会看到剩余的多余空间被平均分配,并在弹性项目之间添加。


    周围空间

    有时您可能还希望在这种情况下将空格放在第一项,最后一项之后,我们有空格值。

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

    标记将是:

    index.html
    
    <div class="container d-flex justify-space-around">
      ...
    </div>
    

    之后,我们将显示的是:
    周围空间
    开头和结尾的空间是flex项目之间的空间的一半。


    空间均匀

    但是,如果即使在项目的开头和结尾都希望有相同的空间,则该值可以是均匀的空间。

    style.css
    
    .justify-space-evenly {
      justify-content: 空间均匀;
    }
    

    标记将是:

    index.html
    
    <div class="container d-flex justify-space-evenly">
      ...
    </div>
    

    之后,我们将显示的是:
    空间均匀
    开头和结尾的空间是flex项目之间的空间的一半。


    您需要记住的是justify-content属性将根据主轴对齐项目,因此,如果将flex-direction设置为column,则该属性将处理垂直对齐。

    演示

    看笔
    Flex证明内容
    由rehmaanali(@geekstrick)
    密码笔.

    证明内容合理

  • 启用通知    不用了,谢谢