Question

我想确保每个跨度与其上方的跨度对齐但我还希望每个跨度的宽度仅与文本一样宽。我试图在.skills-wrapper上设置宽度，但这会使跨度的宽度相同。我怎样才能最好用flexbox实现这个目标？

＆＃13;

.skills-blobs-block {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  max-width: auto;
  color: darkgray;
  height: 32px;
  margin: 0 20px 10px 0;
  padding: 0 20px 0 20px;
}

＆＃13;

<div class="skills-blobs">
  <div class="skills-blobs-block">

    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Woodwork<i class="ics-close fn"></i></span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Textile</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Painting</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Garden</span>
    </div>
  </div>
</div>

＆＃13;

我确定已经在其他地方回答了这个问题，但我无法找到答案。如果它是重复的，请标记:)

Answer 1

尝试使用flex:1中的.skills-wrapper和display:inline-flex中的span ...

同样max-width: auto不是有效值...所以最好将其删除

Stack Snippet

＆＃13;

.skills-blobs-block {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}

span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  color: darkgray;
  height: 32px;
  margin: 0 20px 10px 0;
  padding: 0 20px 0 20px;
}

.skills-wrapper {
  flex: 1;
}

＆＃13;

<div class="skills-blobs">
  <div class="skills-blobs-block">
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Woodwork<i class="ics-close fn"></i></span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Textile</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Painting</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Garden</span>
    </div>
  </div>
</div>

＆＃13;

Answer 2

将flex:1设置为.skills-wrapper并将其设为灵活容器：

＆＃13;

.skills-blobs-block {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}

.skills-wrapper {
  flex: 1;
  display: flex;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  color: darkgray;
  height: 32px;
  margin: 0 20px 10px 0;
  padding: 0 20px;
}

＆＃13;

<div class="skills-blobs">
  <div class="skills-blobs-block">

    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Woodwork<i class="ics-close fn"></i></span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Textile</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Painting</span>
    </div>
    <div class="skills-wrapper">
      <span class="skills-blobs-individual">Garden</span>
    </div>
  </div>
</div>

＆＃13;

使用flexbox排列div

2 个答案: