align-items容器属性

align-items容器属性

align-items属性定义项目在交叉轴上如何对齐。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为justify-content横轴的版本（垂直于主轴）。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

案例

<div class="align-items">
        <div class="center-1">
            <p>我是align-items：center-1</p>
        </div>
        <div class="center-2">
            <p>我是align-items：center-2</p>
        </div>
        <div class="center-3">
            <p>我是align-items：center-3</p>
        </div>
        <div class="center-4">
            <p>我是align-items：center-4</p>
        </div>
    </div>

.align-items{
           display: flex;
           display: -webkit-flex;
           align-items: center;
           justify-content: space-between;
           width: 700px;
           height: 300px;
           margin: auto;
           background-color: red;
       }
       .center-1{
           height: 280px;
       }
       .center-2{
           height: 200px;
       }
       .center-3{
           height: 100px;
       }
       .center-4{
           height: 270px;
       }
       .center-1,.center-2,
       .center-3,.center-4{
           width: 120px;
           border: 2px #ffffff solid;
           background-color: blueviolet;
       }
       p{
           margin: 0;
           color: #ffffff;
           text-align: center;
       }