Flex弹性布局详解

1、Flex弹性布局详解2009年，W3C提出了一种新的方案-Flex布局，可以简便、完整、响应式地实现各种页面 布局。目前，它已经得到了所有浏览器的支持。.基本概念采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元 素自动成为容器成员，称为Flex项目（6* item）,简称“项目”。.容器的属性* 1）： flex-direction *规定盒子容器主轴方向，可以是水平方向和垂直方向，另外侧轴一定是垂直于主轴方向的。* 2）： flex-wrap *规定flex容器主轴上放不下项目的时候，要不要进行换行，以及怎么换行。*3）：flex-flow

2、 *前面两个属性的集合，可以一并设置主轴和换行的属性。*4）： align-items *控制了项目在flex容器侧轴方向上的对齐方式。*5）： justify-content *控制了项目在flex容器主轴方向上的对齐方式。*6）： align-content *本属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。3.属性理解flex-direction排布方向属性理解：flex-direction:row你左手拿着肉串，将它横着摆放在自己的眼前，你发现：咦，这不就是flex容器的主轴为row 的方向吗？没错了这个样子就是我们日常书写方式下的主轴默认值：水平从左往右。羊肉粒

3、1号羊肉粒2号羊肉粒3号、羊肉粒4号-洋肉粒5号flex-direction:row-reverse肉串太大了，你左手保持这个姿势有点累，你换成了右手，你发现：咦，这不就是flex容器方 向的水平从右往左吗？没错了，row-reverse就是和平时的书写方式反向的呈现。羊肉粒5号学神揄皤洋肉粒M号羊肉粒2号羊肉粒1号flex-direction:column-reverse埃，右手又累了，换到左手吧，这个时候发现肉油要滴下来了，你赶忙把羊肉串竖立了起来，你 发现：咦，这不就是flex容器主轴为column垂直从下到上的方向吗？没错了，主轴的方向这个 时候就是从下往上，侧轴变成了水平垂直方向从左

4、往右。羊肉粒5号牛肉粒4号羊肉粒W号 羊肉转号 *雨海1号 flex-direction: column好吧，我实在想象不出来有谁会把羊肉串从上到下这么拿着，姑且你就是这么拿着的吧。这个时 候，你发现，咦？这个不就是flex主轴从上到下的方向吗？没错了，这个时候主轴方向还是垂 直方向，只是变成了从上到下。侧轴没有变化依然是水平方向从左往右。flex-wrap项目换行属性理解：flex-wrap:wrap运气不好，竹签断了一节，羊肉粒排不下了，没办法只能假装吃两根羊肉串了，这时候，你发现， 这不就是换行吗？项目在flex 一行中排列不下了，那么wrap属性值就指定了，这个时候可以进 行换行，第一

5、行在上，第二行在下方。羊囱粒1号羊肉粒2号羊肉粒m号T芈肉粒4号羊肉根5号flex-wrap:wrap-reverse有了之前的经验，很自然的就想到了，反转换行，将原本是最后一行的内容换到最上面来。这个 属性并不是很常用，掌握了 wrap稍加思考就能掌握reverse。羊肉簪:羊肉粒黠昆号羊瀛2号羊肉黑号flex-wrap:nowrap如果你有强迫症，认为分行就失去了羊肉串的意义，ok满足你的需求，本属性概念就是无论flex 容器多么挤，都不进行换行。就好比，哪怕竹签断了一节，都要把肉粒挤在原本的那根竹签里面。羊肉粒1号羊肉粒2号羊肉粒m号羊肉粒4号羊肉粒5号flex-flow flex-di

6、rection、flex-wrap 属性的集合：这个属性是方便偷懒的属性，就好比margin属性可以设置top、left、bottom、right四个值。justify-content规定项目在主轴对齐方式属性理解：justify-content:flex-start项目从flex容器沿着主轴方向的起始点到终点进行依次紧密排列。将整个羊肉串作为容器，主 轴方向从拿着竹签的手开始到竹签尖头作为结束，距离手最近的一粒肉作为项目的开始，尖头处作为项目排队列的末尾。类似word里面的左对齐。羊肉粒1号羊肉粒2号羊肉粒m号justify-content:flex-end你发现最上面那一粒距离竹签尖头部位

7、还有好长一段为了能够轻松的吃到羊肉粒，你把羊肉粒 都往尖头处移动，这个时候，主轴起点就是你的手，主轴末尾就是竹签的尖头处，你发现羊肉粒 距离你的手越来越远了，离竹签尖头处越来越近，那么这个就是flex-end对齐，类似于word 里面的右对齐。王肉粒1号羊肉粒2号羊肉粒m号justify-content: center这个就简单了，所有内部项目沿着flex容器的主轴方向进行居中对齐。当你对你的羊肉串设置justify-content ： center属性后，你会发现，你手到最近一颗肉粒的距 离和竹签尖头到最近一颗肉粒的距离都是相同的，类似于word里面的居中对齐。 justify-conten

8、t:space-around开吃吧，吃第一粒的时候你又发现了一个问题，每一粒排列这么紧密，会沾到嘴巴旁边，感觉不 爽。你开始一粒粒将他们分开，然而这个时候你的强迫症又犯了，感觉随便分开每粒之间的距离， 没有美感。你开始等距离分开每一粒肉，结果是保证每一粒肉之间的距离都相同，并且首尾两粒 到主轴起点和终点的距离也都相同。这个在你看来是完美的分段比例。羊肉粒1号羊肉粒2号羊肉粒涧- justify-content:space-between这个例子有点脏，中间的肉粒之间的距离保持相同，距离手最近的那一粒肉直接接触到了你的手， 也就是手和肉粒之间的距离是0，同样的，距离竹签尖头最近的肉粒和竹签的距离

9、也是0。实现 了两端对齐，不知道是怎么想的，我感觉有点脏，手会变得很油腻埃。羊肉粒号 羊镰!号羊肉黑号align-items项目侧轴排列方式 align-items:flex-start项目在侧轴上对齐的方式是：从侧轴的起点开始进行布局。flex容器内项目紧紧贴住容器侧轴 的起始位置（有margin之类的值，会导致出现空缺，符合逻辑）。羊肉粒1号羊肉粒2号羊肉粒3号 align-items:flex-end项目在侧轴上的对齐方式是：从侧轴的结束位置开始进行布局。flex容器内项目紧紧贴在容器 侧轴的结束位置（有margin之类的值，会导致出现空缺，符合逻辑）。羊肉粒1号羊庞粒号羊肉糠号 ali

10、gn-items:flex-center 项目在容器内部的对齐方式是：侧轴方向居中对齐的布局的样式。flex容器内项目距离侧轴起 点和侧轴终点的距离相等。羊肉燧1号羊肉粒，号羊肉粒W号 align-items:flex-stretch项目在容器内部的对齐方式是：侧轴方向的空间将被整个项目所充满。当然要想stretch能起到作用，要满足的条件是（这里的条件仅在主轴是水平方向适用）：1、 flex容器高度最好是一个固定值；2、容器内部项目不要设置高度（这个高度由强大的浏览器来 进行计算）。如下图所示：每一个item高度都不是固定值。 align-items:flex-baseline咋看一下bas

11、eline，翻译是“基线”，提到这个基线，相信很多同学是深恶痛绝，太难控制。 在flex容器中设置baseline,就会比较简单合乎常理，我们通过一个简单的例子来进行理解： 体育课上，老师要求同学一排站好，然后这个老师也天马行空，认为这样还是不整齐，然后他搬 来了很多高矮不一的凳子，大家都不知道他要干嘛。后来我才发现，这哥们认为只有每个人的下 巴在同一条水平线上，这样才好看，才整齐，那么好了，以谁的下巴为基准呢？我们很自然的得 出，以身高最高的那个同学的下巴作为基准线，那么矮的同学站在凳子上吧，争取下巴能达到基 准线。回到我们的baseline上面来，这里的基准线要想有效果，需要满足这么个条件：1、item项目 内部最好有内容；2、item项目内部的lineheight属性需要设置。那么满足这样的条件后，基准线就是lineheight值最大的那个项目作为基准线。其他的Item 只能搬凳子了。羊血粒1号羊血粒2号羊肉疮3号align-content项目在多跟轴线上的对齐方式，如果只有一根轴线则不起作用，也意思就是要想 该属性发挥作用的前提就是必须要让项目进行分行。要更好的理解这个属性，我们需要建立一个 整体法的思考方式，就像我们高中物理受