Flex 布局笔记

1. Flex布局简介

Flex布局又叫弹性布局,设计思想是应用于响应式布局开发。
兼容性为IE9以上。

2. Flex布局

2.1. 应用于元素

display: flex 应用于元素
display: inline-flex 应用于行内元素
display: -webkit-flex 兼容safari
被应用flex的元素叫做container(容器)
flex container的子元素叫做item(项目)

2.2. Flex布局概念

被应用Flex的container,其items会自动布局。布局方式参照container的flex属性。

2.3. flex-direction

axis是flex container的x轴和y轴
horizon axis 水平轴
vertical axis 垂直轴
container有main axis(主轴)的概念,我们可以在
x+ x- y+ y- 两条轴4个方向上选出任意一条当做main axis。
container的items会自动沿着main axis进行排布。
默认的main axis是x+轴,即从左到右的水平轴。
和main axis垂直的叫做cross axis,(垂直轴)

flex-direction
选择哪一根是main axis
flex-direction:row x+
flex-direction:row-reverse x-
flex-direction:column y-
flex-direction:column-reverse y+

2.3. flex-wrap

flex-direction控制了flex container的items是延那个axis排列,但是没有控制起始行。
flex-wrap就是控制了items的排列起始行。
比如8*8的container,里面放几个items。main axis选择x+。我们知道了items从左到右排列。
同时也必须知道这些items是在 (1,1) (2,1) (3,1) ……这样排列还是(1,-8)(2,-8)(3,-8)这样排列。

flex-wrap
flex-wrap: wrap
flex-wrap: nowrap 不换行 (默认)
flex-wrap: wrap-reverse

如果main axis是x+ 或者x- 那么flex:wrap默认就是y-,即从上到下。同时flex:wrap-reverse就是从下到上
如果main axis是y+ 或者y- 那么flex:wrap默认就是x+,即从左到右。同时flex:wrap-reverse就是从右到左

2.4. flex-flow

flex-flow是flex-direction和flex-wrap的简写形式
flex-flow: <flex-direction> || <flex-wrap>

小结一下

到现在我们知道了什么?

如果有一个4*4弹性的盒子,我们慢慢往盒子里加小盒子,大盒子会控制小盒子的增加位置。
比如从左到右一个个加,如果换行了是新行在下方还是上方等等。

我们继续思考这些问题

默认情况下,当我们加到2个盒子的时候,小盒子的摆放位置应该是这样的
□ □ × ×
× × × ×
× × × ×
在不改变小盒子顺序的情况下,如何改成这样?
× × □ □
× × × ×
× × × ×
默认情况下,当我们加到6个盒子的时候,小盒子的摆放位置应该是这样的
□ □ □ □
□ □ × ×
× × × ×
在不改变这6个小盒子样式的情况下,怎么让这6个小盒子全部下移一行?(对齐到底边)
× × × ×
□ □ □ □
□ □ × ×
这就要引入对齐方式了。

2.5. justify-content

知道了items从哪一行开始,就想excel一样,每一个单元格,我们还可以控制里面文字的对齐方式,比如贴在左边或者居中。
justify-content
justify-content:flex-start 对齐于这一行的起始
justify-content:flex-end 对齐于这一行的结尾
justify-content:center 居中对齐
justify-content:space-between 行首行末贴紧container,其他items间隔相同
justify-content:space-around items间隔相同,行首行末和container的间隔等于items的间隔一半

2.6. align-items

align-items:flex-start 整体对齐于第一行
align-items:flex-end 整体对齐于最后一行
align-items:center 行间距相同,第一行和container的间隔等于最后一行和container的间隔,也等于行间距的一半
align-items:stretch 如果items没有设置宽高,那么会被在行上被拉伸
align-items:base-line 整体对齐于每个items第一行文字

2.7. align-content

仅限于有多行的情况下生效。
align-content:flex-start 行距为0后,整体对齐于第一行
align-content:flex-end 行距为0后,整体对齐于最后一行
align-content:center 行距为0后,整体对齐于中间线
align-content:space-between 首行紧贴container,尾行紧贴container,其他行间隔相同
align-content:space-around 行间隔相同,首行和末行和container的间隔等于行间隔的一半

2.8. flex

flex是items的属性!!!
这是一个合并属性原始属性是
flex-grow 0:空间足够不会自动拉伸 1:空间足够会自动拉伸
flex-shrink 0:空间不够不会自动压缩 1:空间不够会自动压缩
flex-basis auto:自动判断main axis是否够空间 其他值:根据这个值判断main axis是否够空间`

推荐阅读更多精彩内容