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

  • 对齐项目

    课程清单

    在本课程中,我们将了解Align Items属性。对齐项目定义了如何沿交叉轴布置弹性项目的默认行为。

    它的工作原理类似于辩解内容,但在垂直方向上。


    伸展 –对齐项目默认值

    这意味着该项目会拉伸横轴的整个长度。
    对于e.x.我们有一个Flex容器,该容器的任何像素的高度都比项目从顶部到底部的拉伸程度高。

    style.css
    
    .container {
      display: flex;
      height: 200px; /* Flex container with some height */
    }
    .align-item-stretch {
      align-items: 伸展; /* Default value  */
    }
    

    和html将是:

    index.html
    
    <div class="container"> ...
    </div>
    

    之后,我们将显示的是:
    伸展


    弹性启动

    因此,我们可以指定的第二个值是flex-start。

    style.css
    
    .align-item-start {
      align-items: 弹性启动;
    }
    

    和html将是:

    index.html
    
    <div class="container d-flex align-item-start"> ...
    </div>
    

    之后,我们将显示的是:
    弹性启动
    如您所见,所有项目都被推到交叉起点,这是交叉轴的起点。记住横轴从上到下流动。


    柔性端

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

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

    和html将是:

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

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


    居中对齐

    第四个可能的值是center,它使内容在横轴上居中。

    style.css
    
    .align-item-center {
      align-items: center;
    }
    

    和html将是:

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

    之后,我们将显示的是:
    弹性中心


    基准线

    弹性项目的基准值将使弹性项目及其内容基准对齐
    基准:说明
    如上图所示,它具有3个项目A,B,C,每个项目的高度和内容大小都不同。您可以看到弹性项目中的所有内容如何位于基线上。

    style.css
    
    .align-item-baseline {
      align-items: baseline;
    }
    

    和html将是:

    index.html
    
    <div class="container d-flex align-item-baseline"> ...
    </div>
    
    对齐项目

  • 启用通知    不用了,谢谢