百分比布局

特点：

• 流式布局

• 宽度自适应，高度固定

布局方式：宽度为半分比写法

flex布局

Flex的优势和特点：

• 游览器提倡的布局模型，页面渲染性能高

• 布局简单方便

• 避免浮动脱标的问题

• 兼容性较高（不兼容低版本游览器）

组成部分：

• 弹性容器（父级，添加display：flex的盒子）

• 弹性盒子（子级）

• 主轴（默认水平）

• 侧轴（默认垂直）

特点：

给父元素设置display：flex后子元素只会一行显示不换行、可以给子元素设置宽高（行内元素可以）宽默认由内容撑开不设高度会默认拉伸与父元素等高

主侧轴对齐方式：

• 主轴justify-content：

  • center：居中

  • space-between：间距出现在弹性盒子之间

  • space-envenly：父子级间距都相同

  • space-around：间距出现在弹性盒子两侧 视觉效果: 子级之间的间距是父级左右两侧间距的2倍

• 侧轴

  align-items（控制所有弹性盒子）

  • center：居中

  • stretch：默认值，拉伸

  align-self（控制某个弹性盒子）

弹性伸缩比：flex：整数数字；占用父级剩余尺寸的份数

主轴方向flex-direction

主轴排列方向默认时水平方向，侧轴默认时垂直方向

修改主轴方向属性: flex-direction

属性值

作用

row

行，水平排列（默认值）

column

列，垂直方向

row-reverse

行，从右向左

column-reverse

列，从下向上

弹性盒子换行flex-wrap

使用flex-wrap实现弹性盒子多行排列效果

flex-wrap：

• nowrap 不换行默认

• wrap 换行显示

• wrap-reverse 换行反向显示

调整行对齐方式 ：align-content：

• center

• flex-end

• flex-start

• space-around

• space-between

与justify-content属性值相似

这flex盒子布局的小游戏（拯救小青蛙）flexboxfroggy.com/#zh-cn可以加强布局思维

结束语：

敢于战胜困难！