flex布局介绍

本文翻译自A complete Guide to Flexbox可能有一些翻译的不太好望指正。

背景

Flexbox旨在提供一种更加有效的方式进行布局，对齐、在容器内的元素间适当的分配排列空间（子元素的大小也可能是未知的，会动态调节，因此叫flex）。
flex布局的主旨是让容器具有自动调节子元素的款高的能力，这样就可以更好地填充空间（主要还是为了让网页在不同的设备和不同的分辨率上有更好的显示）。一个flex容器会扩大他的子元素来填充空白，也会收缩子元素来避免溢出。
最重要的是，相较于常规的布局（块级元素是基于垂直方向、内联元素是基于水平），flex布局是方向无关的。虽然常规布局也能工作不错，但是在大应用上缺少灵活性支持。（尤其是在方向改变，大小改变，拉伸，缩小时）。
注意：flex布局是用于应用程序组件布局和小规模布局的最适当方式，Grid布局是用于更大的规模的布局。（这个看不太懂）

基础和术语

因为flexbox是一整个模块，包含很多属性。有的是用于容器对象的（父亲元素，叫做“flex container”），有的是用于子元素的（叫做 flex items）。

通常，items要么顺着main axis进行布局（从main-start到main-end），要么顺着cross axis进行布局（从cross-start到cross-end）

• main axie 是flex容器进行布局的主轴。注意，它不一定是水平的，取决于flex-direction属性。
• main start | main end：flex items是在两者之间进行布局的
• main size 这里没太看懂Chris的意思。我理解的应该就是flex盒子的大小

• cross axis 和main axis是正交的，它的方向取决于main axis

  属性介绍

  Parent的属性（flex container)

  display

  这个可以定义flex container。是内联元素还是块级元素取决于给定的值。

.container{    display:flex;//inline or block}

创建了一个flex的环境，他的直接子元素都具有flex的性质。注意CSS的columns会不起作用。

flex-direction

简单点说就是决定是横着还是竖着

.container{    flex-direction:row|row-reverese|column|column-reverse;}

加了reverse的就是从后面往前面依次排。

flex-wrap

默认情况下，flex items会排成一行。设置这个就可以换行

.container{    flex-wrap:nowrap|wrap|wrap-reverse;}

flex-flow

是flex-direction和flex-wrap的简写

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

就是定义了一些左对齐，右对齐，排列的一下效果。直接效果就可以看到啦（水平方向的）

align-items

参照justify-content，就是换成了垂直方向。

.container {  align-items: flex-start | flex-end | center | baseline | stretch;}

子级元素的属性flex items

注意下面的都是用在容器内的元素的属性。

order

这个属性决定了排列的顺序。越小的话越前面，如果想让一个元素永远排前面，就可以直接给他一个负值啦。

.item{    order:<integer>;}

flex-grow

这个决定了flex item变大的能力。这个属性接受一个比例值，表示他应该在container容器中占据多少比例的空间。
未完待续，。。。