flex布局自述

  display: -webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;

1.标准文档流
2.浮动布局
3.定位布局
4.flex布局

对应属性值排列方式：

*位置排列：
flex-start
flex-end
center

*分布排列：
space-around
space-between

对应属性值排列方式：

*位置排列：
flex-start
flex-end
center

*基线排列：
baseline

*拉伸排列：
stretch

换行：wrap
不换行：nowrap
逆序换行：wrap-reverse

row nowrap、column wrap 等，也可两者同时设置

对应属性值排列方式：

*位置排列：
flex-start
flex-end
center

*分布排列：
space-around
space-between

*拉伸排列：
stretch

向右：row
向左：row-reverse
向下：coloumn
向上：coloumn-reverse

无单位数字：1,2,3
有单位数字：15px,50px,100px
none关键字：不伸缩

*位置排列：
    flex-start
    flex-end
    center

*基线排列：
    baseline

*拉伸排列：
    stretch

JyLie

Choose mode

flex布局自述

flex布局自述

# flex 布局总结:

# 快速记忆

# 兼容性写法：

# 四种布局方式：

# flex 布局核心：

# 容器:父容器

# 主轴方向：

# 1.justify-content：

# 交叉轴方向：

# 2.align-items：

# 进阶属性：

# 3.flex-wrap：设置换行方式

# 4.flex-flow:轴向和换行，是 flex-direction 和 flex-wrap 的组合属性

# 5.align-content:多行沿交叉轴对齐：

# 6.flex-direction：

# 容器:子容器

# 子容器进阶属性

# 3.flex-basis:设置基准大小

# 4.flex-grow：设置扩展比例

# 5.flex-shrink：设置收缩比例，剩余空间按比例扩展收缩分配

# 6.order:设置主轴排列顺序

# 轴

# 主轴:

# 交叉轴

# flex 布局共有 13 个属性

JyLie

flex布局自述

flex布局自述

# flex 布局总结:

# 快速记忆

# 兼容性写法：

# 四种布局方式：

# flex 布局核心：

# 容器:父容器

# 主轴方向：

# 1.justify-content：

# 交叉轴方向：

# 2.align-items：

# 进阶属性：

# 3.flex-wrap：设置换行方式

# 4.flex-flow:轴向和换行，是 flex-direction 和 flex-wrap 的组合属性

# 5.align-content:多行沿交叉轴对齐：

# 6.flex-direction：

# 容器:子容器

# 子容器进阶属性

# 3.flex-basis:设置基准大小

# 4.flex-grow：设置扩展比例

# 5.flex-shrink：设置收缩比例，剩余空间按比例 扩展收缩 分配

# 6.order:设置主轴排列顺序

# 轴

# 主轴:

# 交叉轴

# flex 布局共有 13 个属性

# 5.flex-shrink：设置收缩比例，剩余空间按比例扩展收缩分配