css flex布局 —— 容器属性 align-items

＊且听风吟

于 2022-09-28 19:13:35 发布

阅读量6.7k

点赞数 2

分类专栏： # CSS 文章标签： css 前端 safari

本文链接：https://blog.youkuaiyun.com/HH18700418030/article/details/126989206

版权

本文详细介绍了CSS Flex布局中容器属性align-items的五个值：flex-start、flex-end、center、baseline和stretch，通过实例展示了它们在交叉轴上对齐项目的不同效果，帮助理解如何调整元素的对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

属性值

align-items 属性有5个值，如下：

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

flex-start

实例：

<!DOCTYPE html>
<html>
<head>
<style> 
.container {
   
  width: 350px;
  height: 350px;
  border: 1px solid #c3c3c3;
  display: flex;
  display: -webkit-flex; /* Safari */
  align-items: flex-start;
}
.container div {
    width:50px; }
.container div:nth-of-type(1) {
   background-color:coral;height:50px;}
.container div:nth-of-type(2) {
   background-color:lightblue;

最低0.47元/天解锁文章