用HTML5写一个flex布局的案例
时间: 2024-03-09 09:24:28 浏览: 19
好的,以下是一个简单的 HTML5 Flex 布局的示例:
```
<!DOCTYPE html>
<html>
<head>
<title>Flex布局示例</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 `display: flex` 属性来将父元素 `.container` 设置为 Flex 布局。我们使用 `flex-direction: row` 属性将子元素沿着水平方向排列,同时使用 `justify-content: space-between` 属性来将子元素间隔排列。我们还使用了 `align-items: center` 属性来将子元素垂直居中。
每个子元素都被定义为 `.box` 类,其中我们使用 `width` 和 `height` 属性定义每个子元素的大小。我们使用 `display: flex` 属性来将子元素设置为 Flex 布局,并使用 `justify-content: center` 和 `align-items: center` 属性来在每个子元素内部水平和垂直居中文本。