html交叉轴排列,操作一下竖轴- 使用align-items属性设置纵轴排列方式

这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，左对齐

.box {

height: 700px;

background: blue;

display: flex;

align-items: flex-start;

}

实现效果：

flex-end：交叉轴的终点对齐

.box {

height: 700px;

background: blue;

display: flex;

align-items: flex-end;

}

实现效果：

center：交叉轴的中点对齐

.box {

height: 700px;

background: blue;

display: flex;

align-items: center;

}

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {

height: 700px;

background: blue;

display: flex;

align-items: baseline;

}

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。

.box {

height: 300px;

background: blue;

display: flex;

align-items: stretch;

}

.box div {

/*不设置高度，元素在垂直方向上铺满父容器*/

width: 200px;

}

实现效果：

html交叉轴排列,操作一下竖轴- 使用align-items属性设置纵轴排列方式相关推荐

【C++】C++11 STL算法(七)：排列操作(Permutation operations)、数值操作(Numeric operations)
排列操作(Permutation operations) 一.is_permutation 1.原型: template< class ForwardIt1, class ForwardIt2 ...
html让字按弧度排列,PPT文字怎么设置弧形排列?
PPT文字怎么设置弧形排列? 2020-05-11 09:07 作者:网友投稿导读 / 因为一些需要想把PPT里的文字设置成弧形,比如用PPT制作印章时,有些印章的文字是弧形的,如何把文字弄成弧形状 ...
Python 操作 excel 插入图片、表格、设置单元格颜色、字体（三）
Python 操作 excel 插入图片.表格.设置单元格颜色.字体 python 操作 excel 插入图片.表格.设置单元格颜色.字体提示:以下是本篇文章正文内容,下面案例可供参考一.open ...
jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作全选,反选效果 4.文档处理操作标签一.样式操作样式类: addClass(); // 添加指定的css类名removeClass(); //移除指定的css类 ...
c# WinForm开发 DataGridView控件的各种操作总结（单元格操作，属性设置）
一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index ...
在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分（持续补充）
文章目录前言一.align 与 valign 的对齐方式与取值二.常见应用区分整理 2.1.H5 页面设计的取值 2.2.表格标题的取值 2.3.表格属性的取值总结前言不知道大家在学习 H ...
信息学奥赛一本通 1311：【例2.5】求逆序对 | 1237：求排列的逆序数 | OpenJudge NOI 2.4 7622:求排列的逆序数 | 洛谷 P1908 逆序对
[题目链接] ybt 1311:[例2.5]求逆序对 ybt 1237:求排列的逆序数 OpenJudge NOI 2.4 7622:求排列的逆序数洛谷 P1908 逆序对 ybt 1311,123 ...
操作元素之表单属性设置
操作元素之表单属性设置 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
c#文件夹常用操作，属性设置，遍历、压缩
全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#文件夹常用操作,属性设置,遍历.压缩 1.文件夹属性设置 c#使用设置文件夹属性,将文件夹设置为隐藏的.系统的.只读的. 测试代码 static ...

html交叉轴排列,操作一下竖轴- 使用align-items属性设置纵轴排列方式

html交叉轴排列,操作一下竖轴- 使用align-items属性设置纵轴排列方式相关推荐

最新文章

热门文章