本文共 946 字，大约阅读时间需要 3 分钟。

流式布局与flex弹性布局是网页开发中重要的布局方式不同。了解它们的优劣及使用方法，能够更好地解决实际项目中的布局问题。

1. 流式布局

流式布局是传统的布局方式，主要通过设置盒子的宽度百分比来实现。这种布局方式简单易学，且兼容性较好，适用于大多数情况。

• 百分比布局：通过设定各个子盒子的宽度为百分比来控制其大小。
• 示例代码：通过父盒子设为100%宽度，子盒子分别设定不同的百分比。

2. flex弹性布局

flex布局是一种更为灵活的布局方式，适用于需要灵活安排空间的场景，如响应式设计。

• 优点：操作简便，支持多种布局方式，易于维护。
• 缺点：部分浏览器不支持，尤其是IE11及以下版本。
• 基本原理：父盒子设为flex容器，子盒子自动变为flex项目。

flex布局详解

flex directional居中元素布局

通过设置diraction属性，将主轴设置为垂直方向，元素居中。

justify-content属性

• 语法：决定主轴方向上的对齐方式，如left、center、right、space-around等。
• 示例：设置justify-content: center；

flex-wrap属性

控制子元素是否换行：

• nowrap：子元素不会换行，宽度超过父盒子宽度时会自动缩小。
• wrap：子元素自动换行。

flex-flow属性

综合设置主轴方向和换行方式：

• 语法：flex-flow: row wrap;

align-items属性

控制侧轴方向的对齐方式，适用于单行元素布局：

• 定义方式：align-items: flex-start/flex-end/center/ space-between;

align-content属性

控制多行元素的排列方式，适用于多行的侧轴对齐

• 语法：align-content: flex-start/flex-end/center/ space-between;

flex属性

设置子元素占主轴方向的比例，支持数值或百分比表示：

• 语法：flex:3/2/100%;
• 允许方式：通过flex属性，实现多维度的空间分配。

圣杯布局实例

圣杯布局是一种常见的复杂布局应用，通过Flex框架实现非常容易。

通过上述样式，能够轻松构建复杂的布局结构。

转载地址：http://qmhtz.baihongyu.com/