介绍flex布局,flex布局详解
前端应知应会：flex布局详解
前端应知应会：flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。
flex布局全称flexible box布局模型，是一种比较高效的css3布局方案
通过设置元素的display属性，改成flex属性
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性：
1、flex-direction
决定主轴的方向，
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话，如何进行换行
默认是不进行换行，继续沿着主轴方向放置。
其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反）
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是：flex-start即顺着主轴方向排列对齐
其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列
center：居中
space-between：两端对齐，项目之间间隔相等
space-around：每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟，每个item的高度不一定完全一样。
它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式
该参数有六个可选项：
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
针对item，也有一些属性可以设置
1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列
2、flex-grow，决定了item的放大比例，默认为0不进行放大。
3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小
4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式
下面再举个例子
!DOCTYPE html
html lang="en"
【归纳】flex布局
说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：
这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点：
接下来就将对flex布局的几个重要知识点进行归纳。
采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。
flex container（flex容器）有如下六个属性：
该属性主要有以下值：
该属性主要有以下值：
默认值为row nowrap，可以以如下方法设定该属性：
该属性主要有以下值：
该属性主要有以下值：
该属性主要有以下值：
flex item（子元素）有如下六个属性：
该属性默认值为0。
如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。
该属性默认值为1。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。
默认值为0 1 auto。可以以如下方式设定该属性：
数值越小，排列越靠前，默认为0。
即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧
如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto;
实现手机上中下布局：
以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。
博客原地址：
flex 布局
一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局 ? （行内元素也可以）
二、基本概念
采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目
三、容器的属性 （重点记忆）
以下6个属性设置在容器上。
3.1 flex-direction 属性决定主轴的方向（即项目的排列方向）
flex-direction:row | row-reverse | colume | colume-reverse;
1）row：横向从左到右排列（左对齐），默认的排列方式。
2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
3）column：纵向排列
4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-wrap 定义如果一条轴线排不下，如何换行
flex-wrap: nowrap? |? wrap? |? wrap-reverse
1) nowrap (默认)不换行?
2）wrap 换行，第一行排列在上方?
3）wrap-reverse: 换行，第一行在下方
3.2 .flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap ?
justify-content 定义了项目在主轴上的对齐方式
justify-content : flex-start | flex-end | center | space0-between | space-around
align-items 定义项目在交叉轴上如何对齐
align-item: flex-start? |? flex-end? ? |? center? |? baseline |? stretch?
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex布局
1 .1维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。
2 .如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap
3 .任何一个容器都可以被指定为flex布局
4 .行内元素可以被指定为inline-flex
5 .设置flex之后，子元素的float,clear，vertical-align
1 .在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这5个共同决定的
2 .基础尺寸：flex-basic,box-sizing盒模型共同决定
3 .弹性增长;flex-grow属性，弹性收缩；flex-shirk属性
4 .最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了
5 .在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用
6 .flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width||max-widthwidthcontent-size)
7 .是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。
最大最小尺寸限制弹性收缩，弹性扩张基础尺寸
1 .所以无论是什么布局min-width,max-width这种属性都拥有绝对权威
1 .如果是数值，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1.
2 .如果是长度值，比如flex:100px。还是chrome，flex-basis:100px,flex-grow:1,flex-shirk:1。
1 .2个参数，3个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞
2 .flex默认值 0 1 auto 。也就是不放大，等比缩小，用原来的大小
1 .分配固定的家产数量
2 .如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性
3 .flex-basic是作用在content-box上的.设置的width+padding+border
。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*2的长度
4 .flex-basis:支持一堆关键字，但是好多都不支持
1 .家产任然后赋予的时候在怎么分。默认是0.多余空间不分配
1 .家产剩余不够分的时候怎么分。默认是1，空间不足会分配
1 .每一个item固定大小100px。只有flex-basis：100，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是1.所以属性一定还是设置的
2 .每一个item最小宽度是100，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：10，这样各个item的间距不一样
1 .flex-direction:决定主轴的方向
从左到右非别是
2 .flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照1:1缩小，而不是机灵的自动换行，必须使用这个属性才会自动换
3 .flex-flow:上面那俩属性的合并值。
4 .justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式
5 .align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系
6 .align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性
不起作用
1 .order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。
2 .flex-grow
3 .flex-shrink
4 .flex-basis
5 align-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。
flex 布局原理
? flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，
任何一个容器都可以指定为 flex 布局。当为父盒子设置为 flex 布局之后，子元素的
float、clear、vertical-align 属性将失效。
? 采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。他的所有子元
素自动成为容器成员，称为 flex 项目（flex item），简称“项目”。
? 总结：flex 布局就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方
式。
flex布局全解析
很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:
最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.
Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .
flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis) .
flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布.
如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布.
单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上. 让我惊奇的是 flex 竟然比 video 的支持更好?
从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...
但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑 flex .
下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.
这类属性有6种, 分别为:
注意:
注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.
注意: 此属性只在flex容器中有 多行 flex元素时才有作用.
这类属性有6种, 分别为:
注意: flex元素的 float , clear 和 vertical-align 会失效.
当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch .
当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.
默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.
flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.
flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.
flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .
除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.
(敲黑板) 同学们注意, 这里是重点!
这里的 可选值 我参照了 W3C flexbox 的写法. 其中:
举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b .
现在回过头来再看 none | [ ‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’ ] 就清晰多了.
注意, none 是一个特殊值, 相当于 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).
但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .
我来举几个栗子.
W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况 .
自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:
第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).
第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .
第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .
举个栗子.
假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.
假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小 .
下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.
第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .
绝对flex: 从0开始分配空间.
第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".
相对flex: 从flex元素大小开始分配空间.
第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".
呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.
但是, 我相信学flex是值得的, 谁用谁知道!