Flex弹性布局详解
Flex弹性布局详解
2009年，W3C提出了⼀种新的⽅案—-Flex布局，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持。
1.基本概念
采⽤Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有⼦元素⾃动成为容器成员，称为Flex项⽬（flex item），简称”项⽬”。
2.容器的属性
** 1）：flex-direction **
规定盒⼦容器主轴⽅向，可以是⽔平⽅向和垂直⽅向，另外侧轴⼀定是垂直于主轴⽅向的。
** 2）：flex-wrap **
规定flex容器主轴上放不下项⽬的时候，要不要进⾏换⾏，以及怎么换⾏。
**3）：flex-flow **
前⾯两个属性的集合，可以⼀并设置主轴和换⾏的属性。
**4）：align-items **
控制了项⽬在flex容器侧轴⽅向上的对齐⽅式。
**5）：justify-content **
控制了项⽬在flex容器主轴⽅向上的对齐⽅式。
**6）：align-content **
本属性定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤。
3.属性理解
flex-direction排布⽅向属性理解：
> flex-direction:row
你左⼿拿着⾁串，将它横着摆放在⾃⼰的眼前，你发现：咦，这不就是flex容器的主轴为row 的⽅向吗？没错了这个样⼦就是我们⽇常书写⽅式下的主轴默认值：⽔平从左往右。
> flex-direction:row-reverse
⾁串太⼤了，你左⼿保持这个姿势有点累，你换成了右⼿，你发现：咦，这不就是flex容器⽅向的⽔平从右往左吗？没错
了，row-reverse就是和平时的书写⽅式反向的呈现。
> flex-direction:column-reverse
诶，右⼿⼜累了，换到左⼿吧，这个时候发现⾁油要滴下来了，你赶忙把⽺⾁串竖⽴了起来，你发现：咦，这不就是flex容器主轴为column垂直从下到上的⽅向吗？没错了，主轴的⽅向这个时候就是从下往上，侧轴变成了⽔平垂直⽅向从左往右。
> flex-direction: column
好吧，我实在想象不出来有谁会把⽺⾁串从上到下这么拿着，姑且你就是这么拿着的吧。这个时候，你发现，咦？这个不就是
flex主轴从上到下的⽅向吗？没错了，这个时候主轴⽅向还是垂直⽅向，只是变成了从上到下。侧轴没有变化依然是⽔平⽅向从左往右。
flex-wrap项⽬换⾏属性理解：
> flex-wrap:wrap
运⽓不好，⽵签断了⼀节，⽺⾁粒排不下了，没办法只能假装吃两根⽺⾁串了，这时候，你发现，这不就是换⾏吗？项⽬在flex⼀⾏中排列不下了，那么wrap属性值就指定了，这个时候可以进⾏换⾏，第⼀⾏在上，第⼆⾏在下⽅。
> flex-wrap:wrap-reverse
有了之前的经验，很⾃然的就想到了，反转换⾏，将原本是最后⼀⾏的内容换到最上⾯来。这个属性并不是很常⽤，掌握了wrap稍加思考就能掌握reverse。
> flex-wrap:nowrap
如果你有强迫症，认为分⾏就失去了⽺⾁串的意义，ok满⾜你的需求，本属性概念就是⽆论flex 容器多么挤，都不进⾏换⾏。就好⽐，哪怕⽵签断了⼀节，都要把⾁粒挤在原本的那根⽵签⾥⾯。
flex-flow flex-direction、flex-wrap属性的集合：
这个属性是⽅便偷懒的属性，就好⽐margin属性可以设置top、left、bottom、right四个值。
justify-content规定项⽬在主轴对齐⽅式属性理解：
> justify-content:flex-start
项⽬从flex容器沿着主轴⽅向的起始点到终点进⾏依次紧密排列。将整个⽺⾁串作为容器，主轴⽅向从拿着⽵签的⼿开始到⽵签尖头作为结束，距离⼿最近的⼀粒⾁作为项⽬的开始，尖头处
作为项⽬排队列的末尾。类似word⾥⾯的左对齐。
> justify-content:flex-end
你发现最上⾯那⼀粒距离⽵签尖头部位还有好长⼀段为了能够轻松的吃到⽺⾁粒，你把⽺⾁粒都往尖头处移动，这个时候，主轴起点就是你的⼿，主轴末尾就是⽵签的尖头处，你发现⽺⾁粒距离你的⼿越来越远了，离⽵签尖头处越来越近，那么这个就是flex-end对齐，类似于word
⾥⾯的右对齐。
> justify-content: center
这个就简单了，所有内部项⽬沿着flex容器的主轴⽅向进⾏居中对齐。
当你对你的⽺⾁串设置justify-content：center属性后，你会发现，你⼿到最近⼀颗⾁粒的距离和⽵签尖头到最近⼀颗⾁粒的距离都是相同的，类似于word⾥⾯的居中对齐。
> justify-content:space-around
开吃吧，吃第⼀粒的时候你⼜发现了⼀个问题，每⼀粒排列这么紧密，会沾到嘴巴旁边，感觉不爽。你开始⼀粒粒将他们分开，然⽽这个时候你的强迫症⼜犯了，感觉随便分开每粒之间的距离，没有美感。你开始等距离分开每⼀粒⾁，结果是保证每⼀粒⾁之间的距离都相同，并且⾸尾两粒到主轴起点和终点的距离也都相同。这个在你看来是完美的分段⽐例。
> justify-content:space-between
这个例⼦有点脏，中间的⾁粒之间的距离保持相同，距离⼿最近的那⼀粒⾁直接接触到了你的⼿，也就是⼿和⾁粒之间的距离是0，同样的，距离⽵签尖头最近的⾁粒和⽵签的距离也是0。实现了两端对齐，不知道是怎么想的，我感觉有点脏，⼿会变得很油腻诶。
align-items项⽬侧轴排列⽅式
> align-items:flex-start
项⽬在侧轴上对齐的⽅式是：从侧轴的起点开始进⾏布局。flex容器内项⽬紧紧贴住容器侧轴的起始位置（有margin之类的值，会导致出现空缺，符合逻辑）。
> align-items:flex-end
项⽬在侧轴上的对齐⽅式是：从侧轴的结束位置开始进⾏布局。flex容器内项⽬紧紧贴在容器侧轴的结束位置（有margin之类的值，会导致出现空缺，符合逻辑）。
> align-items:flex-center
项⽬在容器内部的对齐⽅式是：侧轴⽅向居中对齐的布局的样式。flex容器内项⽬距离侧轴起点和侧轴终点的距离相等。
> align-items:flex-stretch
项⽬在容器内部的对齐⽅式是：侧轴⽅向的空间将被整个项⽬所充满。
当然要想stretch能起到作⽤，要满⾜的条件是（这⾥的条件仅在主轴是⽔平⽅向适⽤）：1、flex容器⾼度最好是⼀个固定值；2、容器内部项⽬不要设置⾼度（这个⾼度由强⼤的浏览器来进⾏计算）。如下图所⽰：每⼀个item⾼度都不是固定值。
flex布局对齐方式> align-items:flex-baseline
咋看⼀下baseline，翻译是“基线”，提到这个基线，相信很多同学是深恶痛绝，太难控制。
在flex容器中设置baseline，就会⽐较简单合乎常理，我们通过⼀个简单的例⼦来进⾏理解：体育课上，⽼师要求同学⼀排站好，然后这个⽼师也天马⾏空，认为这样还是不整齐，然后他搬来了很多⾼矮不⼀的凳⼦，⼤家都不知道他要⼲嘛。后来我才发现，这哥们认为只有每个⼈的下巴在同⼀条⽔平线上，这样才好看，才整齐，那么好了，以谁的下巴为基准呢？我们很⾃然的得出，以⾝⾼最⾼的那个同学的下巴作为基准线，那么矮的同学站在凳⼦上吧，争取下巴能达到基准线。
回到我们的baseline上⾯来，这⾥的基准线要想有效果，需要满⾜这么个条件：1、item项⽬内部最好有内容；2、item项⽬内部的lineheight属性需要设置。
那么满⾜这样的条件后，基准线就是lineheight值最⼤的那个项⽬作为基准线。其他的Item
只能搬凳⼦了。
align-content项⽬在多跟轴线上的对齐⽅式，如果只有⼀根轴线则不起作⽤，也意思就是要想该属性发挥作⽤的前提就是必须要让项⽬进⾏分⾏。要更好的理解这个属性，我们需要建⽴⼀个整体法的思考⽅式，就像我们⾼中物理受⼒分析所运⽤的整体法⼀样。
> align-content:flex-start
每⼀⾏的项⽬，从侧轴顶部开始排列，每⼀⾏之间没有⾏间距，看起来和
aligin-items:flex-start有点像，我们通过效果图的⽅式来进⾏分别。
align-content:flex-start
align-items:flex-start

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。