Flexbox with Unordered list

问题

I am trying to learn flexbox and I really like it. I am trying play with dynamic widths and when I do it with divs it works. If I try to do it with li, it does not work as well. My code is up on codepen.

div.example
  ul
    li
      | 1
    li
      | 2
    li
      | 3
    li
      | 4
    li
      | 5
    li
      | 6

div.container
  div.col
    | 1
  div.col
    | 2
  div.col
    | 3
  div.col
    | 4
  div.col
    | 5
  div.col
    | 6

SASS Code

.container {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;

  .col {
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

.example {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

回答1:

You need to apply the flex properties to the <ul>

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Putting the properties on the <div> tells it to display the <ul> in flex, not <li>.

回答2:

Based on your markup, note that the <li> elements are the child of <ul>, not the .example division element.

<div class="example">
  <ul>
    <li>1</li>
  </ul>
</div>

Since the immediate parent of the <li> elements are <ul>, use the flex properties on the <ul> that is wrapping around the multiple <li> elements, instead of the outer <div> element:

.example {
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

http://codepen.io/anon/pen/NGPBbg

来源：https://stackoverflow.com/questions/32406364/flexbox-with-unordered-list

标签

css

flexbox