美文网首页
flex布局,弹性布局(上)

flex布局,弹性布局(上)

作者: 托马斯翻滚 | 来源:发表于2018-11-05 23:39 被阅读0次

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

在我的上一篇内容中我又提到过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。这个概念在后面的属性中非常重要所以这里多提一下。

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

相关文章

  • css:About Flex

    * 弹性布局 * 创建弹性布局容器:flex containerdisplay:flex 1.弹性元素 flex ...

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • CSS3弹性布局 flexible boxes

    W3弹性布局: 弹性布局父容器(Flex Containers) 弹性布局子项(Flex Items) 子项于父容...

  • flex布局

    1、什么是flex布局? flex布局又叫弹性布局,弹性盒子,与怪异和模型布局不同,其布局能更精准。 2、如何设置...

  • Flex布局

    Flex Flex:弹性布局 React Native 的默认布局是flex布局 如果将父元素设置成弹性盒模型模式...

  • Flex布局(语法篇)

    一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

  • 前端概念解读

    弹性布局(flex): 30分钟彻底弄懂flex布局

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

  • Flex 布局

    Flex 布局 Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒...

网友评论

      本文标题:flex布局,弹性布局(上)

      本文链接:https://www.haomeiwen.com/subject/kityxqtx.html