CSS-Flex

Flex之前的布局

主要使用：

• normal flow(正常流或叫文档流）
• float+clear
• position relative+absolute
• display inline-block
• 负margin（小技巧）

Flex布局——CSS3中新的布局方式

特点：

1. flex布局与方向无关
2. 可实现空间的自动分配、自动对齐
3. 用于简单的线性布局，更复杂的用grid布局

• 父元素加上display：flex可使子div排列成行

  
  图1

Flex属性

1. flex container的属性

• 方向：

flex-direction:row	从左往右以行展示
flex-direction:row-reverse	反向以行展示
flex-direction:colum	从上往下以列展示
flex-direction:column-reverse	反向以列展示

• 换行：

flex-wrap:wrap	换行
flex-wrap:no wrap	不换行

• 方向-换行简写：

flex-flow:row wrap	以行展示并可换行
flex-flow:column wrap	以列展示并可换列

• 主轴方向对齐方式：

justify-content:sapce-between	空隙放中间
justify-content:space-around	空隙环绕四周
justify-content:flex-start	往前靠
justify-content:flex-end	往后靠
justify-content:center	居中

• 侧轴方向对齐方式：

align-items:stretch	所有元素伸展为最高
align-items:flex-start	往上靠
align-items:flex-end	往下靠
align-items:center	居中
align-items:baseline	容器基线上（不常用）

• 多行/列内容的对齐方式（较少用）
  align-content:stretch|伸展以适应容器（默认）
  其他与上面类似，不表

2. flex item的属性

• 多余空间的分配：（默认为0）

flex-grow:1	该item占1份
flex-grow:2	该item占2份
flex-grow:3	该item占3份

• 空间不够时，收缩比例：flex-shrink:1（默认为1）
• 默认大小（一般不用）：flex-basis：100px（默认auto）
• 以上三个缩写 flex:1 2 100px;
• 顺序 order
• 某个子项单独的对齐方式：

align-self:center	居中
align-self:stretch	伸展适应容器
align-self:flex-start	靠容器开头
align-self:flex-end	靠容器后头

小练习（青蛙游戏）

http://flexboxfroggy.com/#zh-cn

http://www.flexboxdefense.com/