防止使用flex推动兄弟姐妹

Question

我有一张图片，我在其右侧和底部显示一个文字，如第一个片段（完整窗口中的视图片段）中所示。现在我想添加另一个文本，它将位于图像的右上角，位于其他文本的上方，但它会将底部文本推向右侧。我希望两个文本都与图像相关，但最后一段似乎与兄弟相对。 （**抱歉很多html标签，我也使用css框架）

.justify-content-end {
            align-self: flex-end;
        }

<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>
                                <div class="level-item justify-content-end">
                                    <p>Hello World</p>
                                </div>   
                            </div>
                        </div>

这是描述问题的片段：

.justify-content-start {
  align-self: flex-start;
}

.justify-content-end {
  align-self: flex-end;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
}

<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>
    <div class="level-item justify-content-start">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World</p>
    </div>
  </div>
</div>

Answer 1

这是我的解决方案

必须改变你的结构

<div class=" par">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
        <p>Name Placeholder</p>
 </div>

然后

将此添加到css

     .main .stretch{
        align-items: stretch;
      }
     .par{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
      }

＆＃13;

＆＃13;

.justify-content-start {
  align-self: flex-start;
}

.justify-content-end {
  align-self: flex-end;
}

.main .stretch {
  align-items: stretch;
  text-align: center;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
  margin: auto;
}

.par {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level main">
  <div class="level-left stretch">

    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </figure>
    </div>
    <div class=" par">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
      <p>Name Placeholder</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我通常不喜欢position:absolute;，但看起来它在这里可能是合理用途。

.justify-content-start {
  align-self: flex-start;
  min-height: 1.4em; /* keep room for the absolute child */
}

.justify-content-end {
  align-self: flex-end;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
}

@media (min-width: 768px) {
  #click {
    position: absolute;
  }
}

<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>
    <div class="level-item justify-content-start">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World</p>
    </div>
  </div>
</div>