Flex布局和传统的布局有什么不同

在CSS中，我们通常使用布局来定义网页中元素的位置和排列方式。传统的布局方式主要依赖于块级元素和行内元素的特性来进行布局，例如使用浮动、定位和文档流等。

而Flex布局（也称为弹性布局）是CSS3中引入的一种新的布局模型，它提供了一种更加灵活和强大的方式来进行元素的排列。Flex布局通过使用盒模型和弹性属性，可以轻松实现水平和垂直方向上的居中、对齐和分布等效果，而无需依赖于复杂的定位和浮动。

下面我将详细介绍Flex布局与传统布局的不同之处，并提供相应的源代码示例。

1. 容器与项目的关系：
   传统布局中，元素的布局是由其父元素来控制的，通过设置父元素的属性来影响子元素的位置。而Flex布局中，布局是由容器和项目之间的关系来控制的。容器是父元素，用于包含项目（子元素），并通过设置容器的属性来控制项目的布局方式。

HTML源代码示例：

<!-- 传统布局 -->
<div class