flex布局靠左平分上代码

Flex布局（Flexible Box Layout）是CSS3中用于创建灵活和响应式的容器布局的一种方法，它使得元素在容器内根据指定的规则自动调整其大小和位置。如果你想让两个元素靠左平分容器的上半部分，你可以使用以下HTML和CSS代码示例：

HTML:

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
</div>

CSS (假设容器宽度为100%):

.container {
  display: flex;
  position: relative; /* 添加这个属性，因为flex布局默认不会影响父元素的位置 */
  height: 50%; /* 上半部分的高度，可以根据需求调整 */
  justify-content: space-between; /* 靠左对齐且留出相等间距 */
  align-items: flex-start; /* 顶部对齐 */
}

.item {
  flex: 0 0 calc(50% - 10px); /* 靠左平分，每个占50%，减去间距 */
  box-sizing: border-box; /* 确保内部元素的宽度包括边框和内边距 */
}

这里，`.container`设置了`display: flex`，然后使用`justify-content: space-between`使两个子元素在水平方向上均匀分布，并使用`align-items: flex-start`将它们顶部对齐。`.item`的`flex`属性设置为`calc(50% - 10px)`，这样每个元素会占据容器高度的一半，同时减去10px的间距，保证了左右间距相等。