flex布局交叉轴方向对齐方式详解

今天重新研究了一下flex布局发现了一个一直没有理解透而忽略的问题~

align-content属性和align-items属性的作用和区别？

之前学flex布局时看的是阮一峰大神的博客感觉很不错，今天回过头来研究我发现对于align-content属性和align-items属性作用的解释并不是很清楚（可能是我理解能力太差吧）不过没关系，通过查资料和实践最终领悟了~

先看大神的解释:(直接截图啦

让我最开始懵逼的原因就是两个属性的属性值都和交叉轴的对齐方式有关，然后我就傻傻的分不清了。。。

于是有了以下代码为了看效果图我还是上截图：

看上图下部中间样式表可知我设置了justify-content（主轴方向对齐方式）属性为居中，尚未设置align-items属性（默认为flex-start）和align-content属性，为突出效果设置前三个盒子不同的高。

由最右边的小图可知我给四个小盒子设置了右外边距和下外边距为10px，在图中1/2/3盒子的右边距显示为10px，而盒子4与上面三个盒子的外边距明显不为10px，这是由于flex布局交叉轴方向容器内部空白空间弹性分配造成的。。

下面我们设置一下align-items: flex-end;再看效果图：

可以明显的发现在交叉轴方向盒子像设置的一样向轴末端对齐了，而且处于同一行不同高度的三个盒子在行内的对齐方式变为了盒子底端对齐。两行盒子间仍然没有像预期设置的下边距一样10px。

下面我们加上align-content：center属性：

可以看出四个盒子都处于了容器的中间变为了交叉轴方向juzhong对齐。两行盒子的间距也都变为了10px；

由此过程可以看出：

align-items属性在没有设置align-content属性时控制的是交叉轴方向的对齐方式以及沿主轴每一行元素在此行的对齐方式。

align-content属性是实际上是辅助align-items属性在容器内各元素没有占用空白可用空间时，控制交叉轴方向沿主轴每一行的对齐方式

再补一张图：

flex布局交叉轴方向对齐方式详解相关推荐

Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
Flex布局新旧混合写法详解
flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 Flex 的支持都不 ...
Unity3D中UGUI的RectTransform对齐方式详解
https://www.jianshu.com/p/831e2dd7c546 https://www.jianshu.com/p/4592bf809c8b 在Unity自带的UGUI中,RectTra ...
Flex布局新写法兼容写法详解
很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ * ...
C# CAD 开发单行文字对齐方式详解
本人录制c#CAD二次开发视频基础入门全套,感兴趣可以点击下面链接 https://i.xue.taobao.com/detail.htm?spm=a2174.7765247.0.0.6EmxKK& ...
C语言字节对齐问题详解
转载原文连接:https://www.cnblogs.com/clover-toeic/p/3853132.html C语言字节对齐问题详解引言考虑下面的结构体定义: 1 typedef stru ...
步进电机基本原理及驱动方式详解
步进电机基本原理及驱动方式详解步进电机相关概念基本原理类型和结构转子结构定子结构励磁方式 ATD9800 驱动使用实例参考文献步进电机相关概念步进电机是一种常用于控制和定位应用的电动 ...
【Pytorch】交叉熵损失函数 CrossEntropyLoss() 详解
文章目录一.损失函数 nn.CrossEntropyLoss() 二.什么是交叉熵三.Pytorch 中的 CrossEntropyLoss() 函数参考链接一.损失函数 nn.CrossEn ...

flex布局交叉轴方向对齐方式详解

flex布局交叉轴方向对齐方式详解相关推荐

最新文章

热门文章