CSS3 flex 弹性布局 弹线盒布局

参考链接

一个 flexbox 一次只能处理一个维度上的元素布局

父元素设为 Flex 布局 (display: flex/inline-flex;) 以后：

• 子元素的 float 、clear 和 vertical-align 属性将失效。（但子元素的内层不会受到影响）
• 宽度width 会受到 flex布局影响 （主轴对应的长度会被重设）
• 若子元素未设置高度height 高度会被拉伸（辅轴对应的长度需要被设置）
• 默认flex-wrap: nowrap; 子元素会沿主轴排列

父元素(flex容器)配置

父元素属性display flex容器

display: -webkit-flex; /* Safari */
display: flex;/*必须！*/

行内元素flex布局 inline-flex

flex容器属性

flex-direction 主轴方向

主轴方向——沿行/沿列 顺序/逆序
属性列表：

属性	意义
row	默认值
row-reverse
column
column-reverse

flex-wrap 是否换行

是否换行
属性列表：

属性	意义
nowrap（默认值）	不换行
wrap	向下换行 正向换行
wrap-reverse	向上换行 逆向换行

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性（空格分割）。

justify-content 主轴上的对齐方式

直译：版面内容 左右对齐，居中
属性列表：

属性	意义
flex-start（默认值）	开始方向对齐
flex-end	结束方向对齐
center	主轴居中
space-between	两端对齐，项目之间的间隔都相等。
space-around	每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。 （平均分配了每个盒子周围的间隙）

align-items 副轴(交叉轴)方向的对齐方式

直译：行条例。 行也就是副轴

属性	意义
stretch（默认值）	拉伸属性，如果项目未设置高度，将占满整个容器的高度。
flex-start	交叉轴的起点对齐。
flex-end	交叉轴的终点对齐。
center	交叉轴的中点对齐。
baseline	按照flex项目的第一行文字的基线对齐。类似段落式的排序

align-content 多根轴线时(换行)的对齐方式

属性	意义
stretch（默认值）	轴线占满整个交叉轴。
flex-start	与交叉轴的起点对齐。
flex-end	与交叉轴的终点对齐。
center	与交叉轴的中点对齐。
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
space-evenly	均匀间隔

子元素(flex项目)配置

子元素属性 flex项目

flex项目属性

flex-grow

野性生长 瓜分蛋糕
规定flex项目 相对于其他flex项目占据剩余空间的比例权重
默认值0，不进行扩张

flex-shrink

缩小射线 分摊伤害
规定flex项目 相对于flex的项目 对超出的flex容器宽度 进行收缩的比例权重

比如超出了100px 四个flex项目 flex-shrink分别为 1 2 3 4
则它们要缩小的宽度分别是 10px 20px 30px 40px

默认值1 默认flex项目平摊缩小

flex-basis

弹性布局下的初始主轴对应长度 此为border-size

flex 混合属性 flex-grow、flex-shrink 和 flex-basis

是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值 0 1 auto
auto 对应 (1 1 auto)
none 对应 (0 0 auto)

order

调整排序
默认值 0
数字可为负

负数向前移动位置，正数向后移动位置。

align-self

可忽略掉align-items属性
独立的设置对齐方式对齐方式

justify-self

justify-self
在弹性容器下无效
在表格下无效

小技巧： 通过对单个flex项目 设置 flex-grow: 1; 来占满剩余部分，这种布局经常用到，简写 flex: 1