Flex在CSS中的作用及用法详解

Flex是CSS中一个强大且常用的布局模型，用于创建灵活的、自适应的网页布局。它可以帮助开发者轻松地控制元素在容器中的位置、大小和顺序。本文将详细介绍Flex的基本概念、用法和相关属性，并提供一些示例代码。

一、Flex布局的基本概念

Flex布局是一种基于盒模型的布局模型，它使用了两个重要的概念：Flex容器和Flex项目。

1. Flex容器（Flex Container）：Flex容器是一个包含了Flex项目的父级元素。通过设置容器的样式属性，可以控制内部Flex项目的排列方式。

2. Flex项目（Flex Item）：Flex项目是Flex容器的直接子元素。每个Flex项目都具有一些属性，用于定义其在容器中的行为。

二、Flex容器的属性

下面是一些常用的Flex容器属性：

1. display：设置元素为Flex容器。将元素的display属性设置为"flex"可以启用Flex布局。

.container {
   
  display