页面布局（传统布局与现代布局）

传统布局与现代布局详解

在前端开发中，布局是非常重要的一部分。随着技术的发展，布局方式也在不断演变。本文将详细介绍传统布局方法（如 float 和 inline-block）以及现代布局方法（如 flexbox）的特点、存在的问题以及解决办法。

传统布局

Float布局

浮动（float）是早期常用的一种布局方式，通过向需要横向布局的元素添加 float 属性可以实现左右浮动。

float: left; 左浮动

float: right; 右浮动

存在的问题：

使用 float 之后，所在的父级元素无高度，会导致下方元素向上移动。

解决办法：

1.给父级元素设置高度（不推荐）。

2.给父级元素设置 overflow: hidden;，达到父级高度随自己高度自适应的效果（推荐）。

无法解决的问题：

1.元素之间均匀分布需要计算，而且不一定均匀分布。

2.元素均分父级需要计算，而且不一定实现均分。

3.书写繁琐，代码冗余。

Inline-block布局

通过向需要横向布局的元素添加 display: inline-block 可以将其变为内联块级元素。

内联块级元素不独占一行，对宽高支持。

存在的问题：

使用之后元素之间产生莫名其妙的空隙，对整体的布局有影响。

产生的原因：

把换行和空格都当成空白。

解决办法：

1.把元素标签首尾相连（不推荐）。

2.文字大小处理，给使用 display: inline-block 的父级元素设置 font-size: 0;，并且该元素要有有效的字体大小。

无法解决的问题：

1.元素之间均匀分布需要计算，而且不一定均匀分布。

2.元素均分父级需要计算，而且不一定实现均分。

3.书写繁琐，代码冗余。

现代布局

Flexbox布局

弹性盒子（Flexbox）是现代CSS布局的一种方式，只需给父级元素添加 display: flex，就能让多个子元素横向布局。

控制弹性盒子模型内子元素的排列方向：

flex-direction：

row 横向从左到右排列

row-reverse 横向从右往左排列

column 纵向从上到下排列

column-reverse 纵向从下到上排列

设置弹性盒子内子元素是否换行：

flex-wrap：

wrap 换行

nowrap 不换行

设置弹性盒子内子元素的排列顺序：

order：作用到子元素上，属性值为一个整数，值越小，该子元素出现的顺序越靠前。

控制弹性盒子内子元素的缩放比例：

flex 复合属性：

flex-grow 拉伸因子

flex-shrink 压缩因子

flex-basis 基准因子

控制弹性盒子内子元素的分布方式：

justify-content：

flex-start 在排列方向上的开始位置分布

flex-end 在排列方向上的结束位置分布

center 在排列方向上的中间位置分布

space-between 空自元素分布在元素中间

space-around 空白元素分布在元素周围

space-evenly 空白元素均匀分散

控制弹性盒子内子元素在垂直方向上的对齐方式：

align-items：

flex-start 顶部（左端）

flex-end 底部（右端）

center 居中对齐

baseline 首行底部对齐

设置弹性盒子内多行元素的分布方式：

align-content：

flex-start 所有行都靠近顶部（左端）

flex-end 所有行都靠近底部（右端）

center 所有行居中显示

space-between 空自元素分布在行与行之间

space-around 空白元素分布在行的周围

space-evenly 空白元素均匀分布