前端 - 这样的布局怎么写？

Question

宽度不定，间距相同，左对齐。

Answer 1

如果不确定多少块和行，用flex。
如果是固定用grid。

Answer 2

直接用inline-block，设定好margin-right的值就可以了

Answer 3

这样的布局可以使用 CSS 的 flexbox 实现。以下是一种可能的实现方式：

HTML 代码：

<div class="container">    <div class="item">Item 1</div>    <div class="item">Item 2</div>    <div class="item">Item 3</div>    <!-- ... --></div>

CSS 代码：

.container {    display: flex;    justify-content: space-between; /* 元素之间的间距 */}.item {    align-items: center; /* 垂直居中 */    text-align: left; /* 左对齐 */}

在此样式中，.container 是一个 flex 容器，它的子元素 .item 是 flex 项。justify-content: space-between; 在 flex 项之间产生了相等的空间。align-items: center; 和 text-align: left; 分别使 flex 项垂直居中并左对齐文本。

注意，你可以根据需要调整这些样式。例如，如果你想改变间距，可以调整 justify-content 的值。如果你想改变对齐方式，可以调整 align-items 和 text-align 的值。