align-content 与 align-items 区别

ASCH 发布于2019-04-23 11:47 / 1067人阅读

摘要：和共同点它们对齐方向为交叉轴不同点应用于为多行而应用于单行。单行对齐例子多行对齐例子

align-content 和 align-items ：

1：共同点：它们对齐方向为交叉轴

2：不同点：align-content 应用于为多行而 align-items:应用于单行。

单行对齐例子：

display: flex;
justify-content: space-around;
align-items: center;

多行对齐例子

display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: center;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1173.html

Flex入坑指南

摘要：我们给容器设置了宽度为为了方便的减去计算。这个属性用来设置元素在容器中所占据的宽度默认主轴方向，这个属性主要是用来让来计算容器是否还有剩余面积的。弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以...

imccl 2019-08-29 15:35 评论0 收藏0
Flex入坑指南

摘要：我们给容器设置了宽度为为了方便的减去计算。这个属性用来设置元素在容器中所占据的宽度默认主轴方向，这个属性主要是用来让来计算容器是否还有剩余面积的。弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用fle...

番茄西红柿 2019-04-23 13:40 评论0 收藏0
Flex布局做出自适应页面--语法和案例

摘要：布局中的基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。容器默认存在两根轴水平的主轴和垂直的侧轴。例如同时给项目设置属性，则项目的实际宽度是属性属性是和的简写，默认值为。本文发布在：github项目地址：https://github.com/tenadolant...SegmentFault地址：https://segmentfault...

lewinlee 2019-08-01 18:26 评论0 收藏0
Flex布局做出自适应页面--语法和案例

摘要：布局中的基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。容器默认存在两根轴水平的主轴和垂直的侧轴。例如同时给项目设置属性，则项目的实际宽度是属性属性是和的简写，默认值为。本文发布在：github项目地址：https://github.com/tenadolant...SegmentFault地址：https://segmentfault...

wujl596 2019-08-29 14:15 评论0 收藏0