css 使用flex布局评分两列

可以使用flex布局来实现评分两列的效果。以下是一个示例代码：

<div class="container">
  <div class="left-column">
    <span>评分：</span>
    <span>5.0</span>
  </div>
  <div class="right-column">
    <span>评价人数：</span>
    <span>1000</span>
  </div>
</div>

.container {
  display: flex;
}

.left-column, .right-column {
  flex: 1;
}

在上面的代码中，我们创建了一个容器(`.container`)来包含左列(`.left-column`)和右列(`.right-column`)。通过设置`display: flex;`，我们使容器成为一个flex容器。

然后，我们使用`flex: 1;`来将左列和右列平均分配容器的宽度。

你可以根据自己的需要调整样式，并将评分和评价人数放置在相应的`span`元素中。

希望这个例子可以帮助到你！如果你有任何其他问题，请随时问我。

相关问题

flex 两行两列布局

回答: 要实现flex两行两列布局，可以使用以下代码实现：

ul {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

li {
  flex-basis: 50%;
  height: 50%;
  background-color: red;
}

这段代码中，我们使用了`display: flex`来创建一个flex容器，然后使用`flex-wrap: wrap`来实现换行。每个子元素使用`flex-basis: 50%`来占据父容器的一半宽度和高度。最后，我们给子元素设置了一个红色的背景色。这样就实现了一个flex两行两列的布局。\[2\]
#### 引用[.reference_title]
- *1* *2* [flex 实现两行滚动布局实现的思路](https://blog.csdn.net/qq_36668399/article/details/124866564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【CSS】使用Flex做两行或两列布局](https://blog.csdn.net/jiongxian1/article/details/126022498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]