Sam Beers Sam Beers - 2 months ago 10
CSS Question

Aligning columns with flexbox

I need to place a long list of links in the footer of a website, and I'd like to lay them out in columns. This code here produces the look that I'm trying to achieve...



ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

ul li {
border: 1px solid blue;
flex: 1 1 auto;
padding: 8px;
text-align: center;
}
ul li ul {
display: inline-flex;
flex-direction: column;
width: auto;
}
ul li ul li {
display: inline-block;
text-align: left;
width: auto;
}

<ul>
<li>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
</ul>
</li>
<li>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
</ul>
</li>
<li>
<ul>
<li>Link Five</li>
<li>Link Six</li>
<li>Link Seven</li>
<li>Link Eight</li>
</ul>
</li>
<li>
<ul>
<li>Link Nine</li>
<li>Link Ten</li>
<li>Link Eleven</li>
<li>Link Tweleve</li>
</ul>
</li>
</ul>





This works just fine, but I'd prefer to not use multiple lists. Is there any way that can work?

Answer

ul {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  height: 150px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  border: 1px solid blue;
  padding: 8px;
  text-align: center;
}
<ul>
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li>Link Four</li>
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li>Link Four</li>
  <li>Link Five</li>
  <li>Link Six</li>
  <li>Link Seven</li>
  <li>Link Eight</li>
  <li>Link Nine</li>
  <li>Link Ten</li>
  <li>Link Eleven</li>
  <li>Link Tweleve</li>
</ul>

jsFiddle

Comments