Flex布局

Flex 基本概念

flex：弹性布局

行内元素也可以用 flex，webkit 内核的要加上-webkit

注意，设为 Flex 布局以后，子元素自动成为 flex item，并且其 float、clear 和 vertical-align 属性将失效。

容器属性

flex-direction:column-reverse|column|row(default)|row-reverse

flex-wrap:nowrap(default) | wrap | wrap-reverse;

不换行|换行|换行，第一行在下面

flex-flow

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

justify-content：flex-start(default)|flex-end|center|space-between|space-around

定义了项目在主轴上的对齐方式

align-items：flex-start | flex-end | center | stretch（default)| baseline;

项目在交叉轴上如何对齐 baseline:项目的第一行文字的基线对齐。 stretch：如果项目未设置高度或设为 auto，将占满整个容器的高度。

align-content:flex-start | flex-end | center | stretch(default)|space-between | space-around ;

项目在多根轴线上如何对齐 多根轴线

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

项目属性

order：integer(default:0)

数字越小越靠前

flex-grow：integer(default:0)

定义放大比例：如果所有都是 1，则等分，有个项目是 2 的话，即 2 倍距离。

0 的意思是：即使存在剩余空间，也不放大

flex-shrink：integer(default:1)

定义缩小比例：如果都是 1，则一起缩小；如果有一个是 0，1 缩小，0 不缩小。

不可取负值

1 的意思是：若空间不足，则缩小

flex-basis： | auto

定义了：在分配多余空间之前，项目占据主轴空间（main size），默认值为 auto，即项目本来大小。

它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。

flex

flex 属性是 flex-grow、flex-shrink、flex-basis 的简写，默认为 0 1 auto（后两个可选）

该属性有两个快捷值:auto（1 1 auto）和 none（0 0 auto）

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self：auto(default)| flex-start | flex-end | center | baseline | stretch;

允许自己和其他项目不一样的对齐方式；

auto:继承父元素的 align-items，如果没有父元素，则等同于 stretch；

除 auto 外其他属性和 align-items 一样

flex 垂直居中

body {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    vertical-align: center;
    flex-wrap: wrap;
}

实例中网格布局之后的内容 稍后再整理

参考阮一峰语法篇

参考阮一峰实例篇

Donate