flex布局（display:flex）

发表于 | 分类于

基本概念

flex布局适用于简单的线性布局，可以实现空间自动分配和自动对齐。（flexible：弹性，灵活的）


flex container的属性

属性 描述
1、flex-direction 方向
2、flex-wrap 换行
3、flex-flow 上面两个的简写
4、justify-content 主轴方向对齐方式
5、align-items 侧轴对齐方式
6、align-content 多行/列内容对齐方式（用的较少）

  1. flex-direction：row（从左往右排列，默认）、row-reverse（右往左）、column（上往下）、column-reverse

    注：这个属性的排序默认不换行，flex item再多也会自适应调节比例排成一行/列（且此时会无视flex item自身设置的宽/高）。

  2. flex-wrap：wrap

  3. flex-flow：row nowarp

  4. justify-content：

    • space-between：空间均衡地放在flex item中间，两边的flex item会顶到两侧
    • space-around：空间均衡地放在flex item周围，最两侧的flex item也有空间包围
    • flex-start：flex item都往起点靠
    • flex-end：flex item都往终点靠
    • center：flex item都放在中间

  5. align-items：

    • stretch：与flex item最长的那一个对齐，是个默认值

    • flex-start：所有的flex item都往上靠

    • flex-end：所有的flex item都往下靠

    • center：居中

    • baseline：文字基线对齐

  6. align-content：space-around、space-between、flex-start、flex-end

flex item的属性

属性 描述
1、flex-grow 增长比例（空间过多时）
2、flex-shrink 收缩比例（空间不够时）
3、flex-basis 默认大小（一般不用）
4、flex 上面三个的缩写
5、order 顺序（代替双飞翼）
6、align-self 自身的对齐方式
  1. flex-grow：数值（1、2、3等），flex item按这个数值的比例分配多余的空间（1表示全部占有）
  2. flex-shrink：数值（1、2、3等），flex item按收缩比例分配
  3. flex-basis：200px ， 一开始默认占200px大小的固定空间
  4. order：数值（1、2、3等），改变flex item的空间顺序
  5. align-self： flex-end，flex-start ， center ， 每个独立flex-item对齐。

使用flex布局实例

一个熟练flex属性的网页小游戏

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

*最后一关：

1
2
3
4
5
6
7
#pond {
  display: flex;
  flex-flow:column-reverse wrap-reverse;
  align-items:flex-end;
  justify-content:center;
  align-content:space-between
}