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

苏南大叔:网页css布局,如何理解flex弹性盒模型之主轴概念? - css-flex
网页css布局,如何理解flex弹性盒模型之主轴概念?(图5-1)

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

基本概念

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

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

主轴与交叉轴

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

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

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

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

display:flex;
flex-direction:row;
flex名词flex单词苏南大叔的理解
主轴main axisx轴正数部分
交叉轴cross axisy轴负数部分
主轴开始位置main startleft
主轴结束位置main endright
交叉轴开始位置cross starttop 
交叉轴结束位置cross endbottom
项目占据的主轴空间main sizewidth
项目占据的交叉轴空间cross sizeheight

苏南大叔:网页css布局,如何理解flex弹性盒模型之主轴概念? - flex-direction-row
网页css布局,如何理解flex弹性盒模型之主轴概念?(图5-2)

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

display:flex;
flex-direction:row-reverse;
flex名词flex单词苏南大叔的理解
主轴main axisx轴负数部分
交叉轴cross axisy轴负数部分
主轴开始位置main startright
主轴结束位置main endleft
交叉轴开始位置cross starttop 
交叉轴结束位置cross endbottom
项目占据的主轴空间main sizewidth
项目占据的交叉轴空间cross sizeheight

苏南大叔:网页css布局,如何理解flex弹性盒模型之主轴概念? - flex-direction-row-reverse
网页css布局,如何理解flex弹性盒模型之主轴概念?(图5-3)

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

display:flex;
flex-direction:column;
flex名词flex单词苏南大叔的理解
主轴main axisy轴负数部分
交叉轴cross axisx轴正数部分
主轴开始位置main starttop
主轴结束位置main endbottom
交叉轴开始位置cross startleft 
交叉轴结束位置cross endright
项目占据的主轴空间main sizeheight
项目占据的交叉轴空间cross sizewidth

苏南大叔:网页css布局,如何理解flex弹性盒模型之主轴概念? - flex-direction-column
网页css布局,如何理解flex弹性盒模型之主轴概念?(图5-4)

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

display:flex;
flex-direction:column-reverse;
flex名词flex单词苏南大叔的理解
主轴main axisy轴正数部分
交叉轴cross axisx轴正数部分
主轴开始位置main startbottom
主轴结束位置main endtop
交叉轴开始位置cross startleft 
交叉轴结束位置cross endright
项目占据的主轴空间main sizeheight
项目占据的交叉轴空间cross sizewidth

苏南大叔:网页css布局,如何理解flex弹性盒模型之主轴概念? - flex-direction-column-reverse
网页css布局,如何理解flex弹性盒模型之主轴概念?(图5-5)

相关链接

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

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex

本站的忠实读者小伙伴,正在阅读下面这些文章: