align-items: flex-start/end详细说明

参考资料

1. CSS阴影边框
2. flex-direction: row/column
3. 类选择器详细说明以及案例
4. CSS3 阴影
5. 结构伪类选择器详细说明以及案例
6. * 通配符选择器详细说明以及案例
7. Flex布局如何优化页面加载速度？
8. id选择器详细说明以及案例

align-items: flex-start  

• 作用：将弹性子元素沿交叉轴的起点对齐。

• 示例：  

  .container {
    display: flex;
    align-items: flex-start; /* 子元素顶部对齐 */
    height: 200px;
    border: 1px solid black;
  }
  .item {
    width: 50px;
    background: lightblue;
    margin: 5px;
  }

  效果：所有子元素顶部对齐。

align-items: flex-end  

• 作用：将弹性子元素沿交叉轴的终点对齐。

• 示例：  

  .container {
    display: flex;
    align-items: flex-end; /* 子元素底部对齐 */
    height: 200px;
    border: 1px solid black;
  }
  .item {
    width: 50px;
    background: lightblue;
    margin: 5px;
  }

  效果：所有子元素底部对齐。

用法：

• 适用于弹性容器（display: flex 或 display: inline-flex）。

• 控制子元素在交叉轴（默认垂直轴）的对齐方式。

• 其他值：center（居中）、stretch（拉伸）、baseline（基线对齐）。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。