flexbox
HTML/CSS 示例
以下是HTML/CSS中flexbox的示例代码：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- title: Flexbox布局 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局示例</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}
.example {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 30px;
}
h2 {
margin-bottom: 15px;
color: #3498db;
font-size: 20px;
}
/* Flex容器样式 */
.flex-container {
display: flex;
background-color: #ecf0f1;
border-radius: 4px;
margin-bottom: 10px;
min-height: 100px;
}
/* Flex项目样式 */
.flex-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
margin: 5px;
flex: 1;
}
/* 不同的Flex容器配置 */
.flex-direction-row { flex-direction: row; }
.flex-direction-row-reverse { flex-direction: row-reverse; }
.flex-direction-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.flex-wrap-wrap { flex-wrap: wrap; }
.flex-wrap-nowrap { flex-wrap: nowrap; }
/* 特定项目的flex属性 */
.item-1 { flex: 2; background-color: #e74c3c; }
.item-2 { flex: 1; background-color: #2ecc71; }
.item-3 { flex: 1; background-color: #f39c12; }
/* 多行flex容器 */
.flex-wrap-wrap .flex-item {
flex: 0 0 30%;
}
/* 响应式设计 */
@media (max-width: 768px) {
.flex-wrap-wrap .flex-item {
flex: 0 0 45%;
}
}
@media (max-width: 480px) {
.flex-wrap-wrap .flex-item {
flex: 0 0 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Flexbox布局示例</h1>
<!-- 示例1: 基本Flex布局 -->
<div class="example">
<h2>1. 基本Flex布局</h2>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</div>
<!-- 示例2: 不同的flex-direction -->
<div class="example">
<h2>2. 不同的flex-direction</h2>
<h3>flex-direction: row (默认)</h3>
<div class="flex-container flex-direction-row">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
<h3>flex-direction: row-reverse</h3>
<div class="flex-container flex-direction-row-reverse">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
<h3>flex-direction: column</h3>
<div class="flex-container flex-direction-column" style="height: 300px;">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</div>
<!-- 示例3: 不同的justify-content -->
<div class="example">
<h2>3. 不同的justify-content</h2>
<h3>justify-content: center</h3>
<div class="flex-container justify-content-center">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
<h3>justify-content: space-between</h3>
<div class="flex-container justify-content-between">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
<h3>justify-content: space-around</h3>
<div class="flex-container justify-content-around">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
<h3>justify-content: space-evenly</h3>
<div class="flex-container justify-content-evenly">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</div>
<!-- 示例4: 不同的align-items -->
<div class="example">
<h2>4. 不同的align-items</h2>
<h3>align-items: center</h3>
<div class="flex-container align-items-center" style="height: 200px;">
<div class="flex-item">项目1</div>
<div class="flex-item" style="height: 60px;">项目2</div>
<div class="flex-item" style="height: 120px;">项目3</div>
</div>
<h3>align-items: stretch (默认)</h3>
<div class="flex-container align-items-stretch" style="height: 200px;">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</div>
<!-- 示例5: 不同的flex-wrap -->
<div class="example">
<h2>5. 不同的flex-wrap</h2>
<h3>flex-wrap: nowrap (默认)</h3>
<div class="flex-container flex-wrap-nowrap">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
<div class="flex-item">项目4</div>
<div class="flex-item">项目5</div>
<div class="flex-item">项目6</div>
<div class="flex-item">项目7</div>
<div class="flex-item">项目8</div>
<div class="flex-item">项目9</div>
</div>
<h3>flex-wrap: wrap</h3>
<div class="flex-container flex-wrap-wrap">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
<div class="flex-item">项目4</div>
<div class="flex-item">项目5</div>
<div class="flex-item">项目6</div>
<div class="flex-item">项目7</div>
<div class="flex-item">项目8</div>
<div class="flex-item">项目9</div>
</div>
</div>
<!-- 示例6: 不同的flex属性 -->
<div class="example">
<h2>6. 不同的flex属性</h2>
<div class="flex-container">
<div class="flex-item item-1">项目1 (flex: 2)</div>
<div class="flex-item item-2">项目2 (flex: 1)</div>
<div class="flex-item item-3">项目3 (flex: 1)</div>
</div>
</div>
</div>
</body>
</html>说明
该示例展示了不同语言中flexbox的基本用法和常见操作。
主要功能
- 请根据实际代码内容添加功能说明
使用场景
- 请根据实际代码内容添加使用场景