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;height:250px;}
.container div:nth-of-type(3) {background-color:khaki;height:150px;}
.container div:nth-of-type(4) {background-color:pink;height:50px;}
.container div:nth-of-type(5) {background-color:lightgrey;height:100px;}</style>
</head>
<body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p></body>
</html>

页面效果：

flex-end

实例：

  align-items: flex-end;

页面效果：

center

实例：

  align-items: center;

页面效果：

baseline

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {width: 350px;height: 350px;border: 1px solid #c3c3c3;display: flex;display: -webkit-flex; /* Safari */align-items: baseline;
}
.container div { width:50px; }
.container div:nth-of-type(1) {background-color:coral;height:50px;font-size:42px;}
.container div:nth-of-type(2) {background-color:lightblue;height:250px;font-size:28px;}
.container div:nth-of-type(3) {background-color:khaki;height:150px;}
.container div:nth-of-type(4) {background-color:pink;height:200px;;font-size:14px;}
.container div:nth-of-type(5) {background-color:lightgrey;height:100px;}</style>
</head>
<body><div class="container"><div>1</div><div><p>111</p><p>222</p><p>333</p><p>444</p></div><div>3</div><div><p>111</p><p>222</p><p>333</p></div><div>5</div>
</div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p></body>
</html>

页面效果：

可以看到，项目的第一行文字的基线是对齐的：

stretch

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {width: 350px;height: 350px;border: 1px solid #c3c3c3;display: flex;display: -webkit-flex; /* Safari */align-items: stretch;
}
.container div { width:50px; }
.container div:nth-of-type(1) {background-color:coral;}
.container div:nth-of-type(2) {background-color:lightblue;}
.container div:nth-of-type(3) {background-color:khaki;}
.container div:nth-of-type(4) {background-color:pink;}
.container div:nth-of-type(5) {background-color:lightgrey;}</style>
</head>
<body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p></body>
</html>

页面效果：

css flex布局 —— 容器属性 align-items相关推荐

css flex布局 —— 容器属性 flex-wrap
flex-wrap属性默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap属性定义,如果一条轴线排不下,如何换行. 语法 .box{flex-wrap: nowra ...
css flex布局 —— 项目属性 flex-grow
flex-grow 属性定义项目的放大比例,解决的问题是:在空间有多余时把多余空间分配给各个子元素. flex-grow 的值默认为 0,也就是说,如果存在剩余空间,也不放大. flex-grow 取 ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
W3C推荐的新布局模式【CSS Flex布局】详解
本文目录概述属性弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...

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

属性值

flex-start

flex-end

center

baseline

stretch

css flex布局 —— 容器属性 align-items相关推荐

最新文章

热门文章