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

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

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

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

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

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