flex布局代码大全,flex常用布局

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语法——弹性布局

传统的布局，都是基于盒模型，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 | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]

6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满

align-self: auto | flex-start | flex-end | center | baseline | stretch

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

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 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用