移动web复习02-flex专题

Flex布局/弹性布局

Flex布局/弹性布局

1. 是一种浏览器提倡的布局模型

2. 布局网页更简单、灵活

3. 避免浮动脱标的问题

Flex布局模型构成

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

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

组成部分:

1 弹性容器(亲父盒子)

2 弹性盒子(子盒子)

3 主轴(默认X轴)

4 侧轴 / 交叉轴(默认Y轴)

主轴对齐方式

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

display: flex;
            /* 默认让孩子水平排列 */
            justify-content: flex-start;
            /* 终点开始排列*/
            justify-content: flex-end;
            /* 1 沿主轴居中排列 */
            justify-content: center;
            /* 2 space-around 2倍缝隙 */
            justify-content: space-around;
            /* 3 space-between 左右两侧无缝隙 */
            justify-content: space-between;
            /* 4 缝隙一样,均摊 */
            justify-content: space-evenly;

侧轴对齐方式

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

修改侧轴对齐方式属性:

align-items（添加到弹性容器,父盒子）

align-self： 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子,子盒子）

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

(设置每个孩子占几份, 沾满剩余空间)

属性: flex : 数值; (数值(整数))

注意: 1只占用父盒子剩余尺寸;

        2 只给子盒子加

圣杯布局:

1. 两侧盒子写固定大小

2. 中间盒子 flex: 1; 占满剩余空间

主轴方向

目标：使用flex-direction改变元素排列方向

主轴默认是水平方向, 侧轴默认是垂直方向

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

/* row 默认行显示 */
            flex-direction: row;
            /* row-reverse 行, 从右向左 */
            flex-direction: row-reverse;
            /* column 列 */
            flex-direction: column;
            /* column-reverse 列, 从下向上 */
            flex-direction: column-reverse; 

背景图片二倍图的做法

背景精灵图也存在二倍图

核心做法：

1 到像素大厨里面选择2X，利用background-size缩放背景图片

2 测量坐标即可

弹性盒子换行

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

弹性盒子换行显示 : flex-wrap: wrap;

给弹性容器(父盒子)加

flex-wrap: wrap;

调整行对齐方式

调整行对齐方式 ：align-content

(取值与justify-content基本相同, 设置多行对齐方式; align-items单行对齐)

给父亲添加了display: flex; 所有的子盒子(弹性盒子)默认不换行

align-content: center; 
align-content: space-around; 
align-content: space-between;
align-content: space-evenly;