如何在 CSS 中左对齐列？答案

【问题标题】：How to left align columns in CSS?如何在 CSS 中左对齐列？
【发布时间】：2022-01-21 07:13:26
【问题描述】：

我在 mediawiki 上看到了以下情况：

在 F12 开发者工具中找到的属性是：

div 样式

--webkit-columns: 22em 3;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
direction: ltr;
word-wrap: break-word;

ul li风格

break-inside: avoid; 
list-style: square;
text-align: -webkit-match-parent;
direction: ltr;
word-wrap: break-word;

随着列数的增加，底部的列表居中。我怎样才能像a，c，d和左b一样排序？

【问题讨论】：

标签： html css mediawiki

【解决方案1】：

在以下情况下使用多列：

您希望文本显示在类似报纸的列中。
您有一组小项目要分成几列。
您无需针对单个列框进行样式设置。

您可能希望在设计中实现多种设计模式。这里我使用 Flexbox

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
  margin: 0 -15px;
}

li {
  width: calc(33.3333% - 20px);
  margin: 10px 10px 10px;
  background:yellow;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

【讨论】：

【解决方案2】：

display: flex;
flex-flow: row wrap;

以上两个 flex 属性会更有效，因为列在容器类下，所以列会自动采用宽度（屏幕调整大小或在左侧添加导航栏）。

您也可以申请direction: ltr; direction: rtl; 来检查内列是否正确对齐（如果有）。

【讨论】：