菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王涛-20221025-流式布局与flex布局 [打印本页]

作者: 黑桃K 时间: 2022-10-26 15:01
标题: 王涛-20221025-流式布局与flex布局

流式布局（百分比）

概念

1、流式布局就是百分比布局，也叫做非固定像素布局

2、通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应伸缩的目的，不受固定像素的限制

flex布局

传统布局和flex布局对比

传统布局

1、兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）

Flex布局

1、操作方便布局简单，移动端应用广泛

2、pc端有一定兼容性问题，但是目前大部分pc端浏览器也是支持flex布局的

3、ie11+

建议

1、如果是pc端页面布局，最好采用传统方式

2、如果移动端或者不考虑pc端兼容性，都可以采用flex布局

flex布局原理

flex是弹性布局，任何一个盒子都可以指定为flex

当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都失效

采用flex布局元素，成为flex容器（flex container），它的所有的子元素自动成为容器成员，叫做flex项目（flex item）

flex布局父项常见属性

flex-direction：设置主轴方向

在flex布局中分为x、y轴，默认x轴水平向右，也可以是y轴垂直向下

属性值

1、row：x轴从左到右排列（默认）（1234）

2、row-reverse：x轴从右向左（4321）

3、column：y轴从上到下排列

2、column-reverse：y轴从下到上排列

注意

主轴和侧轴是会变化的，当设置x轴为主轴，y就是侧轴，反之亦然

justify-content

设置主轴上的子元素的排列方式

属性

1、flex-start:

默认值，从头部开始，如果主轴是X就是从左到右

2、flex-end:

沿主轴的尾部开始进行排列

3、center：

在主轴上进行居中对齐（如果主轴是X就代表水平居中）

4、space-around:

所有子项平分剩余空间

5、space-between：

先让两侧的盒子贴边，然后再平分剩余的空间

flex-wrap

设置子元素是否换行

默认情况下项目都在一条线上，不进行换行操作

属性值

1、nowrap不换行（默认）

2、wrap换行

align-items

设置侧轴上的子元素排列方式（单行）

属性值

1、flex-start，从头开始

2、flex-end，从尾开始

3、center，居中

4、stretch，拉伸，子项不给高度，拉伸可以将子项高度拉伸到和父项一样高

align-content

设置侧轴上的子元素的排列方式（多行）

属性值

1、flex-start：侧轴从头部排列

2、flex-end：侧轴从尾部排列

3、center：侧轴居中显示

4、space-around：沿侧轴平分控件

5、space-between：沿侧轴两侧贴边，中间平分空间

6、stretch：子项没有高度时，平分侧轴高度

align-items和align-content的区别

align-items适用于单行情况，只有上对齐，下对齐，居中和拉伸

align-content适用于多行情况下（单行无效），可以设置上对齐，下对齐，居中和拉伸以及平分剩余空间等属性

单行align-items，多行align-content

flex-flow复合属性

是flex-direction和flex-wrap的复合属性，主轴和是否换行

flex布局子项常见属性

1、align-self：控制子项自己在侧轴上排列方式

1、flex-start：从头开始

2、 center：侧轴居中

3、flex-end：侧轴尾部

4、stretch：拉伸

2、order属性定位项目的排列顺序

数值越小排位越靠前，默认为0，数值可以为负数

注意不要与z-index混淆

3、flex来控制子项独占份数

在子项里设置flex：n

注意

一个盒子可以同时是容器和项目

如果子项有自己的宽度/高度，其余子项有flex：1，将剩余的部分进行平分

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)