flex布局,弹性布局(上)

今天在睡懒觉、上课、然后打了一晚上游戏中度过了,导致到现在我今天的笔记依然没写。。。眼看时间实在不允许了,就加先设定个标题明天再写吧。恩!就这么办吧!

在我的上一篇内容中我又提到过flex布局,这里就接上上一篇的内容写一下这个内容。其实在这个内容上我的文章可能并不是很好的学习文章(这个内容最好还是图文结合才能很好的理解,我实在做不出合适的图,哭),在这里我推荐大家去百度一下看看别的内容会更好。

学习flex布局具体的属性这些内容之前,我们先要学习两个概念性的内容。

1,容器(flex container)和 项目(flex item)

flex布局简单来说就是一个父元素和数个子元素,父元素和子元素都有一些属性,设定后就会呈现出一种布局的方法。而这里的父元素就是容器,子元素就是项目。这个概念搞懂了其实就很容易理解了,flex布局中容器和项目也各有各自不同的属性。

2,主轴(main axis)和 交叉轴(cross axis)

在容器中又存在两条轴,主轴(main axis)和交叉轴(cross axis)。这两个轴属于概念性的东西,在视图上不会显示,但却是后面许多属性的基准。在默认情况下可以简单的当成直角坐标系中的X轴和Y轴(就是主轴是从左到右,交叉轴从上到下)。

主轴起始位置和容器边界交接处叫main start,结束位置和容器边界交接处叫main end;交叉轴其实位置和容器边界交接处叫cross start,结束位置和容器边界交接处叫cross end。其实就是很直白的内容,开始就是start,结束就是end。这个概念在后面的属性中非常重要所以这里多提一下。

这篇文章我本来打算一次写完的,但感觉这个内容实在有点多,就先写上这些前置内容,把剩下的部分单独再写一次吧(其实我就是感觉有点多想混一下)。但这里我还是得说一下我不推荐大家通过我这篇文章学习这一内容,我的文章大多是一种对自己理解的总结和复习,本就不那么严谨和专业,同时这一内容是需要图文结合的,不然真的很难理解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 布局的传统解决方案:是基于盒模型,这种布局依赖display属性 + position属性 + float属性,但...
    kim_jin阅读 5,101评论 1 18
  • 花花是一条狗。牙牙在污水管内发现它的时候,它已经奄奄一息,瘦得只剩下一身骨头了。牙牙虽不是那种爱心泛滥的慈善家,但...
    上官乔安阅读 2,929评论 0 0
  • 有句话叫“由俭入奢易,由奢入俭难”, 从节俭变得奢侈是容易的,从奢侈变得节俭却困难了。这句话在很多方面都说得通。 ...
    薛薛闲扯阅读 2,701评论 0 0
  • 电视剧中的一个情节。他们之前深深相爱,后来由于种种原因黯然分手。后来,男人留在了香港,女人 去了异国他乡。几年后,...
    格子_阅读 1,504评论 0 0
  • 未完待续。。。欢迎补充
    vision_colion阅读 1,832评论 0 3

友情链接更多精彩内容