CODEWITHSUNDEEP
cssflexbox
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Flexbox with ul list

I want to use flexbox to build 2x2 grid with my list. My code is as follows:

<ul class="cont">
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

css:

.cont { display: flex; }
.cont li { width: 50%; }

Unfortunately, it aligns four of my li in a row.

Upvotes: 6

Views: 13893

Answers (4)

jenkizenki
jenkizenki

Reputation: 798

Another way is to use flex-direction.

.cont {
  display:flex;
  flex-direction:column; // or row depending on which way you want it to flow
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

You probably need to set the flex properties of the li and make sur eyou tell the parent to wrap when required.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cont {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cont li {
  flex: 0 0 50%;
  border: 1px solid grey;
  text-align: center;
}
<ul class="cont">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Upvotes: 1

m4n0
m4n0

Reputation: 32275

Wrap the flexible box row and give the items flex-basis: 50% or width: 50%

.cont {
  display: flex;
  flex-flow: row wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */
}
.cont li {
  flex-basis: 50%; /* or width: 50% */
}
<ul class="cont">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Upvotes: 3

Dan Gamble
Dan Gamble

Reputation: 4155

flex-wrap: wrap let's flex know it's allowed to wrap. It's default argument when undefined is nowrap.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Upvotes: 1

Related Questions