我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在最开始的互联网上的网页构成上,一般都是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布局的详细说明经验文章,请点击下面的链接:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

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

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