html - 选中宽度不同

Question

我试图让 ul 具有不同的宽度。这ul是弯曲的，我想要ul（将在一列中的前两项to be 60% in width and the last two items 40%. But myflex-basis` 不起作用？

.container{
  border: 1px solid red;
  display:flex;
  height: 125px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  list-style-type: none;
}

ul li{
  margin-bottom: 15px;
  border: 1px solid blue;
}

/* li:nth-child(1), 
li:nth-child(2){ 
  flex-basis: 60%;
}

li:nth-child(3), 
li:nth-child(4){ 
  flex-basis: 40%;
} */

<div class="container">
  <ul>
    <li>should be 60%</li>
    <li>should be 60%</li>
    <li>should be 40%</li>
    <li>should be 40%</li>
  </ul>
</div>

标签： htmlcssflexbox

Answer 1

去掉左边的填充<ul>（我假设这就是你想要的）并简单地使用width而不是指定宽度flex-basis：

.container{
  border: 1px solid red;
  display:flex;
  height: 125px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  list-style-type: none;
  padding-left: 0;
}

ul li{
  margin-bottom: 15px;
  border: 1px solid blue;
}

li:nth-child(1), 
li:nth-child(2){ 
  width: 60%;
}

li:nth-child(3), 
li:nth-child(4){ 
  width: 40%;
}

<div class="container">
  <ul>
    <li>should be 60%</li>
    <li>should be 60%</li>
    <li>should be 40%</li>
    <li>should be 40%</li>
  </ul>
</div>