百分比布局
-
特点
- 流式布局
- 宽度自适应，高度固定
-
布局方式
- 宽度为百分比写法
FLex布局
-
Flex的优势和特点
- 浏览器提倡的布局模型，页面渲染性能高
- 布局简单、方便
- 避免浮动脱标的问题
- 兼容性较高（不兼容低版本浏览器）
-
组成部分
- 弹性容器（父级， 添加display:flex的盒子）
- 弹性盒子（子级）
- 主轴（默认水平）
- 侧轴（默认垂直）
-
主侧轴对齐方式
-
主轴
-
justify-content
-
center：居中
-
space-between：间距出现在弹性盒子之间
-
space-evenly：父子级间距都相同
-
space-around：间距出现在弹性盒子两侧
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
-
-
侧轴
-
align-items（控制所有弹性盒子）
- center：居中
- stretch：默认值， 拉伸
-
align-self（控制某个弹性盒子，属性值和align-items一致）
-
-
-
弹性伸缩比
- flex: 整数数字;
- 占用父级剩余尺寸的份数
-
注意
-
display:flex:将容器设置为伸缩盒子，子元素就会成为伸缩项
-
justify-content:设置子元素在主轴方向上的排列方式
-
align-items:设置子元素在侧轴方向上的排列方式
-
flex:设置元素所有父容器剩余空间的比例，如果没有设置默认值为0
-
flex-direction:设置主轴方向，默认为row | column
-
-
flex:设置给子元素
-
align-self:设置给子元素，设置子元素在侧轴方向的单独的排列方式
