7.移动Web-Flex布局

Flex布局

目标： 能够使用Flex布局模型灵活、快速的开发网页
l Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题

作用

Ø 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Ø Flex布局非常适合结构化布局

设置方式

Ø 父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分

Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴 / 交叉轴

弹性盒子：

弹性容器的最近一级子元素(亲儿子子元素)

1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

l 修改主轴对齐方式属性: justify-content

image.png

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

l 修改侧轴对齐方式属性:
Ø align-items（添加到弹性容器）
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

image.png

/* flex-start 默认值，从父元素的左边开始显示 */

/* justify-content: flex-start; */

/* flex-end 让弹性盒子整体，显示在弹性容器的右侧 */

/* justify-content: flex-end; */

/* center 让弹性盒子整体，显示在弹性容器的中间 */

/* justify-content: center; */

/* space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2 */

/* justify-content: space-around; */

/* space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0 */

/* justify-content: space-between; */

/* space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */

justify-content: space-evenly;

伸缩比

l 属性
Ø flex : 值;

l 取值分类
Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸

伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度

image.png

修改主轴方向（flex-direction）

目标：使用flex-direction改变元素排列方向
l 主轴默认是水平方向, 侧轴默认是垂直方向
l 修改主轴方向属性: flex-direction

image.png

弹性盒子换行（flex-wrap）

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

image.png

总结：

1.弹性容器设置的属性：df，jc，ai
2.弹性盒子设置的属性：align-self，flex