Question

我想使用flexbox与我的列表构建2x2网格。我的代码如下：

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

的CSS：

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

不幸的是，它连续排列了li中的四个。

Answer 1

包裹柔性框行并提供项目flex-basis: 50%或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>

Answer 2

flex-wrap: wrap让我们知道它可以包装。当undefined为nowrap时，它的默认参数。

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

Answer 3

另一种方法是使用flex-direction。

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

Answer 4

您可能需要设置li 和的弹性属性，以便在需要时告诉父级换行。

＆＃13;

* {
  -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;
}

＆＃13;

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

＆＃13;

带有ul列表的Flexbox

4 个答案: