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布局
? ??Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空
间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。
? ??采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（main
axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main
end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。
1.给父元素加上display:flex开始盒子布局
row? ? |? ? row-reverse? ? |? ? column? ? |? ? column-reverse
（1）row（默认值）：主轴为水平方向，起点在左端。
（2）row-reverse：主轴为水平方向，起点在右端。
（3）column：主轴为垂直方向，起点在上沿。
（4）column-reverse：主轴为垂直方向，起点在下沿。
nowrap? ? |? ? wrap? ? |? ? wrap-reverse
（1）nowrap：不换行
（2）wrap ：换行。第一行在上方
（3）wrap-reverse：换行。第一行在下方
flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? space-between? ? |? ? space-around? ??
（1）flex-start（默认值）：左对齐
（2）flex-end：右对齐
（3）center： 居中
（4）space-between：两端对齐，项目之间的间隔都相等
（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? baseline? ? |? ? stretch
（1）flex-start：交叉轴的起点对齐
（2）flex-end：交叉轴的终点对齐
（3）center：交叉轴的中点对齐
（4）baseline: 项目的第一行文字的基线对齐
（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
auto? ? |? ? flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? baseline? ? |? ? stretch
该属性可取6个值，除了auto，其他都与align-items属性完全一致。
(完)
Flex布局：Flex布局
传统布局：
flex布局：
使用范围： 1、如果是PC端页面布局，建议使用传统布局 2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局
flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。
设置侧轴排列
justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.
默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。
align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。
设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex布局中子元素也存在着相对应的一些属性
flex属性定义子元素分配 剩余空间 ，用flex来表示占的多少份，默认为0 针对这个，可以先了解有名的CSS布局 圣杯布局 以及 双飞翼布局 ,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。
align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。
order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0
首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。
前端应知应会：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设置专门的对齐方式
下面再举个例子
【归纳】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学习的小游戏，寓教于乐，十分有趣。
博客原地址： http://franko.top/1809/20180925A/
flex布局，看完这篇都懂了
flex布局
开启flex布局
display:flex (独占一行)
inline-flex(允许换行)
应用在flex container上的css属性
应用在flex items上的css属性
flex container的属性:
justify-content: 决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start 对齐
flex-end:与main end 对齐
center:居中对齐
space-between: flex items之间的距离相等. 与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等
align-items 决定了flex item在cross axis上的对齐方式
flex-wrap 决定了单行还是多行
flex-flow是 flex-direction || flex-warp的缩写
flex-flow: row-reverse 等价于
flex-direction:row-reverse
flex-wrap:nowrap
align-content 决定了多行flex items在cross axis 上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似 在cross axis上拉伸
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致
flex-shrink 决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex - shrink * flex item的base size
base size 就是flex item 放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height
flex-grow 决定了flex items如何扩展
可以设置任意非负数字(正小数,正整数,0),默认值是0
放flex container 在main axis 方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size * flex-grow/sum
如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为
flex container 的剩余size * flex-grow
flex items 扩展后的最终size不能超过max-width\max-height
举例:flex-direction为row的情况下 父容器宽度 400px 有三个子容器宽度均为100,
flex-grow分别为1,2,3
这样可以得出
A的宽度= 100 * (1/6) + 100 = 116.66
B的宽度 = 100 * (2/6) + 100 = 133.33
C的宽度 = 100 * (3/6) + 100 = 150
若 flex-grow分别为 0.1 ,0.2,0.3,则结果为:
A的宽度= 100 * 0.1 + 100 = 110
B的宽度 = 100 * 0.2 + 100 = 120
C的宽度 = 100 * 0.3 + 100 = 130
flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数组(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container 的size,flex-shrink属性才会有效
每个flex item 收缩的size为
flex items超出flex container 的size * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex-shrink * flex item的base size
base size就是flex item 放入 flex container之前的size
flex item收缩后的最终size不能小于min-width\min-height
举例:总容器宽度 500px 一共六个子视图,
宽度分别为110,120,130,140,150,160,
shrink为1,2,3,4,5,6,
总长度:110+120+130+140+150+160 = 810
总共得收缩的长度:810 - 500 = 310
收缩比例 是 flex-shrink * item的 主轴方向的size
sum = 110 * 1 + 120 * 2 + 130 * 3 + 140 * 4 + 150 * 5+ 160 * 6
item1的收缩比例是 110 * 1 需要收缩的具体为 310 * (110 * 1)/sum
item2的收缩比例是 120 * 1 需要收缩的具体为 310 * (120 * 2)/sum
item3的收缩比例是 130 * 1 需要收缩的具体为 310 * (130 * 3)/sum
item4的收缩比例是 140 * 1 需要收缩的具体为 310 * (140 * 4)/sum
item5的收缩比例是 150 * 1 需要收缩的具体为 310 * (150 * 5)/sum
item6的收缩比例是 160 * 1 需要收缩的具体为 310 * (160 * 6)/sum
flex-basis
设置flex items在 main axis方向的base size
auto(默认值) content 取决于内容本身的size
决定flex-item最终base size 的因素 优先级从高到低
max-width max-height min-width min-height
flex-basis
width height
内容本身的size
flex-basis 0
flex-group 1
联合使用的效果:
flex是flex-grow flex- shrink? || flex-basis
默认值是0 1 auto
none: 0 0 auto
Flex布局详解（一）
Flex布局的特点：
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex布局可以实现空间自动分配，自动对齐（flexible：弹性、灵活）
3、flex适用于简单的线性布局，更复杂的布局要交给grid布局
图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。
（1）、flex-direction常用得属性值有 row 、 row-reverse 、 column 、 column-reverse ,默认情况下属性值是 row 。
HTML
CSS
CSS
（3）、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。
CSS
CSS
Flex语法——弹性布局
传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上 flex-direction: row | row-reverse | column | column-reverse 2. 换行：不换行（默认） | 换行 | 换行并第一行在下方 flex-wrap: nowrap | wrap | wrap-reverse 3.主轴方向和换行简写 flex-flow:
||
4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 justify-content: flex-start | flex-end | center | space-between | space-around 5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） align-items: flex-start | flex-end | center | baseline | stretch 6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认） align-content: flex-start | flex-end | center | space-between | space-around | stretch
1. 排序：数值越小，越排前，默认为0 order:
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推） flex-grow:
; /* default 0 */ 3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。） flex-shrink:
; /* default 1 */ 4.固定大小：默认为0，可以设置px值，也可以设置百分比大小 flex-basis:
| auto; /* default auto */ 5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满 align-self: auto | flex-start | flex-end | center | baseline | stretch
这写的很乱，我看着都乱凑合看吧！！！
微信小程序flex布局
Flex布局：意为“弹性布局”，为盒模型提供巨大的灵活性
使用说明：
1. 任何容器都可以使用flex布局
??display: flex;
2.行内元素可以使用flex布局
??display: inline-flex;
外层flex容器的属性：
1.flex-direction属性
??flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2.flex-wrap属性
?flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (默认值) ：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow:
||
;
4. justify-content属性：定义item在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性：定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用
?align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目item的属性
1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面
order:
;
2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
?flex-grow:
; /* default 0 */
3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小
?flex-shrink:
; /* default 1 */
4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小
flex-basis:
| auto; /* default auto */
5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选
?flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;