Flex布局学习

·  阅读 1091
Flex布局学习

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情

Flex(弯曲;屈伸;活动)

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。

lufei.gif

flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思

弹性盒子是一种用于按行或按列布局元素的一维布局方法; 元素可以膨胀以填充额外的空间, 也可收缩以适应更小的空间;

使用Flexbox来进行布局的方案称之为flex布局(flex layout)

为什么使用Flex布局?

任何技术以及方案的出现都是为了弥补之前的缺陷,作为一种更优解。

传统的布局方案使用标准流、浮动和定位,基于盒子模型实现网页布局。

如何要在父子盒子中实现子元素垂直居中

——传统布局可用 position + transform

那如何使父级容器(container)内的所有子元素等分父级宽度or高度?

又如何使父级容器内的所有子元素等间隙分布?

……

新的方案flex布局更加灵活,可以更简便、响应式地实现以上页面布局。

Flex布局中的重要概念(两对象,两轴,两线)

两对象:flex container(容器)和flex item(项目)

flex container(容器)

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

flex: flex container 以 block-level 形式存在

inline-flex: flex container 以 inline-level 形式存在

flex item(项目)

当flex container中的子元素变成了flex item时, 具备一下特点:

flex item的布局将受flex container属性的设置来进行控制和布局;

flex item不再严格区分块级元素和行内级元素;

flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

模型(两轴两线)

image.png

容器默认存在两根轴:水平的 主轴(main axis) 和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end(start起始线,end结束线)

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

给父级容器设置的属性

1.flex-direction

flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布 我们可以通过设置主轴和交叉轴来控制子元素的排序方式

flex-direction 可以设置 main axis 的方向,有 4 个取值

row(默认值)、row-reverse、column、column-reverse

image.png

flex-wrap

默认情况下,项目在水平方向上都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行

flex-wrap 设置 flex container 是单行展示or多行展示

取值有: nowrap、 wrap、 wrap-reverse

image.png

(1)nowrap(默认):单行,不换行。 image.png (2) wrap:多行
image.png (3)wrap-reverse:多行(对比 wrap,cross start 与 cross end 反转)

image.png

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

书写随意,flex-direction属性和flex-wrap属性先后位置任意,都可省略(取默认值)

justify-content

justify-content定义 flex items(项目) 在 main axis(主轴) 上的对齐方式,

取值有:

flex-start(默认值):与 main start 对齐

flex-end:与 main end 对齐

center:居中对齐

29fb3d389192417e9051022730030a07_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.gif

space-between

flex items 之间的距离相等

与 main start、main end两端对齐

space-around

flex items 之间的距离相等

flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

space-evenly

flex items 之间的距离相等

flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

align-items

align-items属性定义项目在交叉轴上如何对齐。

image.png

normal:在弹性布局中,效果和stretch一样

stretch:当 flex items 在 cross axis 方向的 size 为 auto 时,会自动拉伸至填充 flex container

flex-start:与 cross start 对齐

flex-end:与 cross end 对齐

center:居中对齐

baseline:与基准线对齐

align-content

align-content属性定义了多根轴线 在 cross axis 上的对齐方式,用法与 justify-content 类似。如果项目只有一根轴线,该属性不起作用。

image.png

stretch(默认值):与 align-items 的 stretch 类似

flex-start:与 cross start 对齐

flex-end:与 cross end 对齐

center:居中对齐

space-between

flex items 之间的距离相等

与 cross start、cross end两端对齐

space-around

flex items 之间的距离相等

flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

space-evenly

flex items 之间的距离相等

flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

给子级项目设置的属性

align-self

flex items 的align-self属性允许单个项目有与其他项目不一样的对齐方式,可以通过 align-self 覆盖 flex container 设置的 align-items

image.png

auto(默认值):遵从 flex container 的 align-items 设置

stretch、flex-start、flex-end、center、baseline,效果跟 align-items 一致

order

order属性定义项目的排列顺序数值越小,排列越靠前,默认为0。 可以设置任意整数(正整数、0、负整数) image.png

flex-grow(长大)

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 扩展后的最终 size 不超过 max-width\max-height

flex-shrink(缩小)

flex-shrink 设置 flex items 如何收缩/缩小

可以设置任意非负数字(0、正小数、正整数),默认值是 1

当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size为

flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

flex items 收缩后的最终 size 不能小于 min-width\min-height

image.png

flex-basis

flex-basis属性定义了在分配多余空间之前,项目(flex items)占据的主轴空间(在 main axis 方向上的 base size)。浏览器根据这个属性,计算主轴是否有多余空间

它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间

auto(默认值)、具体的宽度数值(比如300px)

决定 flex items 最终 base size 的因素,从优先级高到低

max-width\max-height\min-width\min-height

flex-basis

width\height

内容本身的 size

flex

flex属性flex-grow, flex-shrink 和 flex-basis的合写,

默认值为0 1 auto。后两个属性可选。

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个,2个或3个值。

该属性有三个快捷值:auto (1 1 auto) 和 none (0 0 auto)和initial(0 1 auto)

单值语法: 值必须为以下其中之一:

一个无单位数(): 它会被当作flex-grow的值。

一个有效的宽度(width)值: 它会被当作 flex-basis的值。

关键字none,auto或initial。

双值语法: 第一个值必须为一个无单位数,并且它会被当作 flex-grow 的值。

第二个值必须为以下之一:

一个无单位数:它会被当作 flex-shrink 的值。

一个有效的宽度值: 它会被当作 flex-basis的值。

三值语法:

第一个值必须为一个无单位数,并且它会被当作 flex-grow 的值。

第二个值必须为一个无单位数,并且它会被当作 flex-shrink 的值。

第三个值必须为一个有效的宽度值, 并且它会被当作 flex-basis 的值。

常见flex布局样式

圣杯布局

流式布局

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改