Question

我需要创建布局，其中包含两列中的项目列表。就像我在下面展示的那样：

＆＃13;

.container {
  border: 1px solid red;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item {
  border: 1px dashed blue;
  height: 50px;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

＆＃13;

＆＃13; 但是这种布局存在问题。如果只有一个项目 - 它将占用全宽。即使有一些项目，我也需要保留列。

Answer 1

您可以为项目设置最大宽度，等于50％。无论如何，这将保持几乎相同的宽度。我说几乎是因为你也设置了边框。

为了保持宽度完全相同，您还必须为item设置box-sizing：border-box。

所以，你的代码将是：

UICollectionViewDelegateFlowLayout

＆＃13;

segmented control

＆＃13;

.item {
  border: 1px dashed blue;
  height: 50px;
  box-sizing: border-box;
  max-width: 50%;
}

＆＃13;

Answer 2

尝试这样的事情：

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
    height: 100px;
    background-color: green;
}

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>

两列弹性框布局

2 个答案: