是否可以在下面一行中将一个 flex 子项对齐到另一个 flex 子项上方？

Question

我在这里遇到了一个 flexbox 标签。我有一个页眉，它由两部分组成：较小的文本“综合手册：”和“如何将狗从英国带到其他国家”。

所以问题是，根据设计文件，“如何将狗从英国带到其他国家”应该居中，但“综合手册”行不应该，它应该从第二行的字母“H”上方开始，“How to take...”，如下图所示： here

显然，当我调整窗口大小时，flexbox 开始做这件事并围绕文本进行战争，改变 “如何” 的位置，但是 “综合手册”也应该移动以跟上。

是否可以使用 flexbox，或者我应该使用 ::after 伪元素来实现它？或者也许有更好的解决方案？

代码如下，还有一个带有示例的代码笔链接。 非常感谢！

<div class="take-where-box">
    <div class="flex">
        <div class="take-where-box__text-block large" id="take-where-box__text-block-intro"><p class="take-where-box__small-text">A Comperhensive Manual:</p></div>
        <div class="take-where-box__text-block" id="take-where-box__text-block-1"><p>How to take a dog</p></div>
        <div class="take-where-box__text-block" id="take-where-box__text-block-2"><p>from UK</p></div>
        <div class="take-where-box__text-block" id="take-where-box__text-block-3">
            <div class="select-box">
                /*code for select box*/
            </div> <!-- end of select-box-->
        </div>   
    </div>
    </div> <!-- take-where-box-->

完整的代码笔在这里： https://codepen.io/abby97/pen/oNYjrpV

Answer 1

或许布局可以通过对align-items属性和一个伪元素稍作调整来实现。

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end; /* changed from baseline */
}

#take-where-box__text-block-1::before {
  font-size: 70%;
  content: "A Comprehensive Manual:";
}

#take-where-box__text-block-1::before {
  font-size: 70%;
  content: "A Comprehensive Manual:";
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Calibri', serif;
  font-size: 100%;
  color: black;
  background-color: var(--cyan-superdark);
}

.container {
  background-color: var(--main_color);
  margin: 0 auto;
  width: 80%;
}

.header,
.content {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  background-color: var(--yellow-main);
}

.content {
  background-color: var(--cyan-superdark);
}

.take-where-box {
  font-size: 3rem;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  width: 90%;
  border: 0.4rem solid black;
  padding: 1.5rem;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.take-where-box__small-text {
  font-size: 70%;
  margin: 0;
}

.take-where-box__text-block {
  flex-basis: 1;
  /* flex-shrink: 0; */
  /* min-width: min-content;   */
  padding: 0 0.5rem;
}

.large {
  flex-basis: 100%;
}

.take-where-box__text-block>p {
  margin: 0;
}


/*select-box - a custom select box, taken from https://www.youtube.com/watch?v=k4gzE80FKb0 */

.select-box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 22rem;
}

.select-box__selected-option,
.select-box__options-container {
  border: 0.4rem solid black;
}

.select-box .select-box__options-container {
  max-height: 0;
  opacity: 0;
  transition: all 0.3s;
  /* what are other options? */
  order: 1;
}

.select-box__selected-option {
  margin-bottom: 8px;
  position: relative;
  order: 0;
}

.select-box__options-container {
  position: absolute;
  box-sizing: border-box;
  /*otherwise border will add up to the witdh of this element making it bigger than parent, BAD!*/
  width: 100%;
  top: 7.5rem;
  background-color: white
}

.select-box__selected-option::after {
  content: "";
  background: url("assets/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  height: 100%;
  width: 3.0rem;
  /* height: 4rem; */
  right: 1rem;
  top: 1rem;
  transition: all 0.4s;
}

.select-box .select-box__options-container.active+.select-box__selected-option::after {
  transform: rotateX(180deg);
  top: -1rem;
}

.select-box .select-box__options-container.active {
  max-height: min-content;
  opacity: 1;
}

.select-box .select-box__option,
.select-box__selected-option {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.select-box .select-box__option:hover {
  background-color: blue;
}

.select-box label {
  cursor: pointer;
}

.select-box .select-box__option .radio {
  display: none;
}

<div class="container">
  <div class="take-where-box">
    <div class="flex">
      <div class="take-where-box__text-block large" id="take-where-box__text-block-intro">
        <!--<p class="take-where-box__small-text">A Comperhensive Manual: </p>-->
      </div>
      <div class="take-where-box__text-block" id="take-where-box__text-block-1">
        <p>How to take a dog</p>
      </div>
      <div class="take-where-box__text-block" id="take-where-box__text-block-2">
        <p>from UK</p>
      </div>
      <div class="take-where-box__text-block" id="take-where-box__text-block-3">
        <div class="select-box">
          <div class="select-box__options-container">
            <div class="select-box__option">
              <input type="radio" class="radio" id="US" name="category">
              <label for="US">to US</label>
            </div>
            <div class="select-box__option">
              <input type="radio" class="radio" id="EU" name="category">
              <label for="EU">to EU</label>
            </div>
          </div>
          <!-- end of select-boxoptions-container-->
          <div class="select-box__selected-option">
            to US
          </div>
        </div>
        <!-- end of select-box-->
      </div>
    </div>
  </div>
  <!-- take-where-box-->
</div>

revised codepen

Answer 2

我相信您的代码过于复杂。 您可以使用这段代码实现图像中的元素定位。请注意 css 是内联的，因为这只是一个指导方针，您可以根据需要进行调整：

<div style="display:flex; align-items:center; flex-direction:column">
  <div>
    <div>
        <p>A Comperhensive Manual:</p>
    </div>
    <div style="display:flex">
        <p>How to take a dog from UK</p>
        <p>selectbox</p>
    </div>
 </div>
</div>