How to left align columns in CSS?

user_11609440 0
Viewed 86

I've seen the following happen on mediawiki:

enter image description here

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 and left b?

mediawiki css html
2 Answers

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>

user_46724740 
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 or adding a navbar to the left).

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

user_87662820
Related