网页css布局，如何理解flex弹性盒模型之主轴概念？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在最开始的互联网上的网页构成上，一般都是table的天下。后来的时候，流行的是css+div，鄙视table布局。那么，近些年来，很多前端已经开始大批量使用flex弹性盒模型，来组织页面。那么，在本文中，苏南大叔就实践一下flex布局的几个基本属性的用法。当然，这个flex弹性盒模型和传统的盒式布局区别很大。需要静下心来，想想该如何设置这个flex布局呢？

本文测试环境：mac、chrome@74.0.3729.169。理解flex弹性盒子，就要首先了解主轴的概念。由于篇幅限制，苏南大叔在本文种就主要描述：主轴及其引申概念。

基本概念

对于某个元素只要声明了display:flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

• 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
• 每根轴都有起点和终点，这对于元素的对齐非常重要。
• 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
• 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

主轴与交叉轴

flex布局的写法和传统布局非常不同了。flex布局的很多属性，在传统的css中都是有对应关系的。但是，在flex这边，都是有新的名字。所以，您就需要自己脑补做个转化了。

• 主轴和交叉轴成90度角垂直。
• 主轴和交叉轴具有相同的起点。
• 主轴四个方向都有可能，而交叉轴不是向右就是向下。

下面的表是flex布局的一些知识点，结合了苏南大叔的理解。这里一共有四种情况：

主轴水平，交叉轴竖直，第四象限

display:flex;
flex-direction:row;

主轴水平，交叉轴竖直，第三象限

display:flex;
flex-direction:row-reverse;

主轴竖直，交叉轴水平，第四象限

display:flex;
flex-direction:column;

主轴竖直，交叉轴水平，第一象限

display:flex;
flex-direction:column-reverse;

相关链接

本文的动态说明配图来自网络：

• https://www.cnblogs.com/qcloud1001/p/9848619.html

总结

由于篇幅限制，苏南大叔在这里，就简单的描述一下flex弹性盒模型的基本概念中的主轴。

更多苏南大叔提供的flex布局的详细说明经验文章，请点击下面的链接：

• https://newsn.net/tag/flex/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。