flex布局详细讲解（Flex布局：Flex布局）

本文目录

• Flex布局：Flex布局
• flex弹性布局彻底掌握
• Flex语法——弹性布局
• Flex布局详解（一）
• flex布局，看完这篇都懂了

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布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。
1.flex container
2.flex items
如图所示：

flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图：

默认情况下flex的排列方向为main start到main end，当切换到其他属性时：
flex-direction：row-reverse

flex-direction：column-reverse

1.2justify-content属性
justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。
justify-content：center

justify-content：flex-end

justify-content：space-between
是每个items间隔相等

justify-content：space-around
items间的间隔是边缘间隔的两倍

1.3align-items
align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline
stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如：

align-items：flex-start
items与cross start对齐

1.4flex-wrap
flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse
flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container

1.6align-content

align-content：flex-start（这就解决了上述中换行没有紧挨的问题）

align-content：flex-end

align-content：center

align-content：space-between（两端cross start 与cross end对齐）

align-content：space-around（与justify-content一样）

align-content：space-evenly

二、flex items上的css属性
2.1order
order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。

2.3flex-grow
flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：

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: 《flex-direction》 || 《flex-wrap》
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: 《integer》
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）
flex-grow: 《number》; /* default 0 */
3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）
flex-shrink: 《number》; /* default 1 */
4.固定大小：默认为0，可以设置px值，也可以设置百分比大小
flex-basis: 《length》 | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
flex: none |
6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满
align-self: auto | flex-start | flex-end | center | baseline | stretch

这写的很乱，我看着都乱凑合看吧！！！

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布局，看完这篇都懂了

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