使用Flex布局防止兄弟元素被挤压的技术问询

我明白你的问题啦！你现在用Bulma的level布局时，把两段文本分别放在了独立的level-item里，而level-item默认是横向排列的flex子元素，所以新增的顶部文本容器会和底部的并排，自然就把底部的挤到右边去了。

要让两段文本都相对于图片定位，并且分别在右侧的顶部和底部，你需要把这两段文本放到同一个level-item容器里，然后给这个容器设置垂直方向的flex布局，让它的高度和图片一致，这样就能让两段文本分别对齐顶部和底部了。

修改后的代码 #

CSS部分

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 128px; /* 和图片高度保持一致 */
}
.top-text {
  align-self: flex-start;
}
.bottom-text {
  align-self: flex-end;
}
#click { 
  text-align: center; 
  width: 128px; 
  cursor: pointer; 
  border: 1px solid red; 
}

HTML部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
  <div class="level-left">
    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </figure>
    </div>
    <!-- 把两段文本放到同一个level-item里 -->
    <div class="level-item text-container">
      <label class="label top-text">
        <p id="click">Click Me!</p>
      </label>
      <p class="bottom-text">Hello World</p>
    </div>
  </div>
</div>

关键说明 #

• 合并两个level-item为一个容器，避免横向排列导致的挤压问题
• 给容器设置flex-direction: column让文本垂直排列，justify-content: space-between让两段文本分别靠顶部和底部
• 容器高度设置为和图片相同的128px，确保文本的对齐基准和图片一致

内容的提问来源于stack exchange，提问作者pileup