如何在CSS中左对齐列？

Question

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

​

​

F12 developer工具中的属性是：

div风格

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

乌里风格

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

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

Answer 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>

​

Answer 2

display: flex;
flex-flow: row wrap;

以上两个flex属性将更有效，并且由于列位于容器类下，因此列将自动获得宽度(屏幕调整大小或在左边添加一个导航条)。

您还可以应用direction: ltr; direction: rtl;检查内部列的正确对齐(如果有的话)。