Flex弹性盒子布局案例（认识弹性布局）

一、导航菜单

此示例创建了一个水平导航菜单，其中链接在 Flex 容器中等距分布。

HTML结构：

<nav class="nav-menu"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a>
</nav>

CSS样式：

.nav-menu {display: flex; /* 使用 Flex 布局 */justify-content: space-around; /* 在主轴上等距分布 */
}.nav-menu a {text-decoration: none; /* 去除链接的下划线 */color: #333; /* 设置链接文本颜色 */padding: 10px; /* 设置链接内边距 */
}

运行结果：

二、卡片布局

这个示例创建了一个包含三个卡片的卡片布局，卡片在 Flex 容器中等距分布。

HTML结构：

<div class="card-container"><div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>

CSS样式：

.card-container {display: flex; /* 使用 Flex 布局 */justify-content: space-between; /* 在主轴上等距分布 */
}.card {width: 200px; /* 设置卡片宽度 */height: 150px; /* 设置卡片高度 */border: 1px solid #ccc; /* 添加边框 */
}

运行结果： 

三、响应式布局

这个示例创建了一个简单的响应式布局，项目在 Flex 容器中根据空间自动换行，并在容器中均匀分布。

HTML结构：

<div class="flex-container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

CSS样式：

.flex-container {display: flex; /* 使用 Flex 布局 */flex-wrap: wrap; /* 允许项目换行 */
}.item {width: 100px; /* 设置项目宽度 */height: 100px; /* 设置项目高度 */background-color: #ccc; /* 设置背景颜色 */margin: 10px; /* 设置项目外边距 */
}

运行结果：

 四、网格布局

在 Flexbox 中创建一个灵活的网格布局是非常常见的。这可以用于创建响应式的网格系统，适应不同的屏幕尺寸和布局需求。

HTML结构

<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
</div>

CSS样式

.grid-container {display: flex; /* 使用 Flex 布局 */flex-wrap: wrap; /* 允许项目换行 */justify-content: center; /* 在主轴上居中对齐 */
}.grid-item {width: 200px; /* 设置项目宽度 */height: 200px; /* 设置项目高度 */background-color: #ccc; /* 设置背景颜色 */margin: 10px; /* 设置项目外边距 */display: flex; /* 嵌套的 Flex 容器 */justify-content: center; /* 内部项目居中对齐 */align-items: center; /* 内部项目垂直居中对齐 */
}

运行结果

五、侧边栏布局

创建了一个包含侧边栏的布局，主内容区域会自动填充剩余空间，而侧边栏则保持固定宽度。

HTML结构

<div class="main-container"><div class="sidebar">Sidebar</div><div class="content">Main Content</div>
</div>

CSS样式

.main-container {display: flex; /* 使用 Flex 布局 */
}.sidebar {width: 200px; /* 侧边栏宽度 */background-color: #f0f0f0;padding: 20px;
}.content {flex-grow: 1; /* 主内容区域充满剩余空间 */padding: 20px;
}

运行结果

六、水平垂直居中对齐

这个示例创建了一个容器，其中的内容水平和垂直居中对齐，适用于创建模态框等UI组件。

HTML结构

<div class="center-container"><div class="center-content">Centered Content</div>
</div>

CSS样式

.center-container {display: flex; /* 使用 Flex 布局 */justify-content: center; /* 在主轴上居中对齐 */align-items: center; /* 在交叉轴上居中对齐 */width: 100%; /* 宽度占满父容器 */height: 300px; /* 固定高度 */background-color: #f0f0f0;
}.center-content {padding: 20px;background-color: #ccc;
}

运行结果