CSS Flexbox弹性盒子模型总结

1. 背景

弹性盒子布局指在提供一个为容器内的items进行更有效率的排列，分配空间以及布局的方式，弹性的意思是即使items的尺寸是未知或者动态的也可使用！

这种布局的理念主要是给容器一种能力能够调节修改items的宽度高度和顺序来充分利用容器内可用的空间---甚至能够适应几乎全部的设备和屏幕尺寸。

更重要的是，弹性盒子布局的方向是不可知的，这个与常规的布局相反（块布局是垂直方向的而行内则是水平基准的），虽然方向这个概念对于pages来讲很好，可是它缺少灵活性来支持一些更大的更复杂的应用（尤为是当方向改变，尺寸变化，拉伸缩小时）

注意：弹性盒子模型更适用于组件化的应用以及小规模布局，大规模布局能够用Grid布局

2. 基础和术语

这部分介绍弹性盒子模型中容器和其中Item的属性

2.1 容器属性

display

咱们须要经过display属性来定义一个容器为Flexbox

.container {
  display: flex; /* or inline-flex */
}

flex-direction

经过该属性能够定义容器内item主轴的方向，items就会沿着主轴排列。Flexbox是单方向布局模型。你能够考虑把容器内item横着排列或者竖着排列。

注意：下面的一些图示和示例都按照flex-direction为row的状况编写。

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

• row（default）：横向正向排列
• row-reverse：横向反向排列
• column：纵向正向排列
• column-reverse：纵向反向排列

flex-wrap

默认状况下，弹性容器内的items倾向于在单行内布局。你能够经过这个属性来容许容器尝试多行布局。

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

nowrap(default):只容许单行布局
wrap:容许多行布局
wrap-reverse：容许多行布局（反向）

flex-flow

这个属性只是上面两个属性缩写，默认属性是row nowrap：

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

justify-content

这个属性定义了items沿着主轴的排列方式，它能够帮助全部布局在一行的弹性item
s合理的经过不一样方式来使用剩余的空间，同时也会对溢出的items进行分配：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start(default):左对齐（依据flex-direction）
• flex-end：右对齐（同上）
• start：左对齐（不过不是根据flex-direction，而是根据根元素的writing-mode属性，这是用于决定整个页面行布局的方向）
• end：右对齐（同上）
• left：左对齐（容器的左边沿，若flex-direction属性不适用，那具体表现等同start）
• right：右对齐（同上）
• center：居中
• space-between：沿主轴方向，等间距排列，首末子组件与父组件相距0
• space-around：沿主轴方向，等间距排列，首末子组件与父组件相距1/2个间距

注意不一样的浏览器对上述属性支持有差别的，目前适配比较好的属性包括flex-start，flex-end和center。

最后咱们能够添加一个额外的属性safe和unsafe：

• safe：确保你没法将那些自己就渲染出屏幕外的且浏览器content没办法到达进行处理
• unsafe：上述操做能够

align-items

这个定义了items沿着次轴（主轴交叉轴，例如主轴是X轴，次轴就是Y轴）的排列方式，具体内容和上面属性相似：

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（default）：拉伸item来充满容器，但遵照min-width和max-width属性
• flex-start/start/self-start:左对齐，不一样点在于根据flex-direction仍是writing-mode
• flex-end/end/self-end：右对齐，区别同上
• center：居中
• baseline：与他们的基线对齐

align-content

这个一样也是针对次轴进行排列，和上述不一样的是这个属性针对是多行的状况下，若是只有一行这个属性是没用的（能够用上一个属性代替）

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

具体属性就不说明了。

2.2 items属性

order

这个属性用于决定flex容器中items排列的顺序，order越大越日后

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

这个属性定义了item是否有能力在有必要的状况下扩展本身的尺寸，定义了在flex容器中item自身能够占用的空间比例。

若是全部的item这个值都设置为1，那么容器内可用空间将会均等分配给全部的子item，若是一个子item的属性值是2，它将会占有其余item空间的2倍

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

这个属性定义了一个item可用缩小的能力，用法相似上面属性：

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis

这个属性定义了一个元素在剩余空间进行分配以前的默认尺寸，例如20%,5rem这样。

auto关键词意味着让容器看着item本身的宽度或高度来决定（目前暂时是经过main-size关键词来实现的），会根据flex-grow的值进行分配

content关键词意味着默认尺寸参考item的内容大小，这个属性还没实现，暂时用不了...

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex

flex-grow，flex-shrink，flex-basis三者属性的缩写方式。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

比较推荐用这个属性来代替上面写法。

align-self

这个属性用于单个item覆盖容器的默认排列方式（经过align-items指定的）

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

3. 浏览器支持

经过不一样Flexbox版本区分:

• (new) means the recent syntax from the specification (e.g. display: flex;)
• (tweener) means an odd unofficial syntax from 2011
• (e.g. display: flexbox;)

(old) means the old syntax from 2009 (e.g. display: box;)

4. 参考资料

CSS-trick的指导

React-Native之Flex布局

flex布局中align-items 和align-content的区别