How to left align columns in CSS?-CodePudding

I've seen the following happen on mediawiki:

The properties found in the F12 developer tools are:

div style

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

ul li style:

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

As the number of columns increases, the list at the bottom is centered. How can I sort like

a c d
b

CodePudding user response：

Use multicolumn when:

You want your text to display in newspaper-like columns.
You have a set of small items you want to break into columns.
You do not need to target individual column boxes for styling.

There are a number of design patterns you might want to achieve with your design. Here I use 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>

CodePudding user response：

display: flex;
flex-flow: row wrap;

Above two flex properties will be more effective and as the columns are under container class so automatically columns will take the width(screen resize).

You can also apply direction: ltr; direction: rtl; to check proper alignment of inside columns if any.