css:About Flex

* 弹性布局 *

• 创建弹性布局容器:flex container
  display:flex

1.弹性元素 flex item

• 弹性容器的在文档流中的直接子元素
  （position:absolute等脱离文档流、 孙元素 都不是弹性元素）

屏幕快照 2016-07-22 下午4.06.56.png

1.排列方向

(1).flex-direction
flex-direction:row|row-reverse|column|column-reverse
row左到右（默认）
column上到下
reverse反向
eg.

屏幕快照 2016-07-22 下午3.46.34.png

(2).flex-wrap
flex-wrap:nowrap|wrap|wrap-reverse
nowrap（默认值）不换行

eg.

屏幕快照 2016-07-22 下午8.28.51.png

(3).flex-flow
flex-flow:<'flex-direction'>||<'flex-wrap'>
eg.

屏幕快照 2016-07-22 下午8.33.19.png

(4).order
order:
initial:0

order是一个相对的值
越大越靠后排
eg.

屏幕快照 2016-07-22 下午8.56.20.png

2.弹性

(1)flex-grow
flex-grow:
initial:0
设置元素所能分配到剩余空间的比例
弹性布局元素宽度计算：flex-basis + flex-grow/sum(flow-grow)remain
(2)flex-shrink
flex-shrink:
initial:1
弹性布局元素宽度计算：flex-basis + flex-shrink/sum(flow-shrink)remain
(3)flex-basis
flex-basis:main-size|
设置flex item的初始宽/高
flex:<'flex-grow'>||<'flex-shrink'>
initial:0 1 main-size

3.对齐

(1)justify-content
justify-content:flex-start|flex-end|center|space-between|space-around

屏幕快照 2016-07-28 上午10.22.18.png

主轴设为纵向

屏幕快照 2016-07-28 上午10.32.40.png

(2)align-items 设置辅轴(cross-axis)方向的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch

屏幕快照 2016-07-28 上午10.51.22.png

(3)align-self 设置单个flex item 在cross-axis方向上对齐方式
align-self:auto|flex-start|flex-end|center|baseline|stretch
(4)align-content 设置cross-axis方向上行对齐方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch

三行两列自适应布局

屏幕快照 2016-07-28 下午1.36.58.png