html 几行的空间分成3个区域

1.代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>三个区域示例</title>  
<style>  
  /* 设置整体容器样式 */  
  .container {  
    display: flex; /* 使用Flexbox布局 */  
    justify-content: space-between; /* 子元素之间的间隔相等 */  
    width: 100%; /* 容器宽度占满整个屏幕 */  
  }  
  
  /* 设置每个区域的样式 */  
  .region {  
    flex: 1; /* 每个区域都等宽 */  
    height: 200px; /* 你可以根据需要调整高度 */  
    background-color: #f0f0f0; /* 设置背景色以区分区域，实际使用时可以去除或修改 */  
    margin: 10px; /* 设置外边距，增加区域之间的间隔 */  
    padding: 20px; /* 设置内边距，增加区域内部的空间 */  
    box-sizing: border-box; /* 使得宽度和高度包括内边距和外边距 */  
    text-align: center; /* 文本居中显示 */  
  }  
</style>  
</head>  
<body>  
  
<div class="container">  
  <div class="region">区域 1</div>  
  <div class="region">区域 2</div>  
  <div class="region">区域 3</div>  
</div>  
  
</body>  
</html>