嵌套的 flexbox 对齐项目中心特定内容

Question

我正在尝试构建下面的简单表单。

我正在使用 flexbox，但无法正确对齐文本区域。 align-items: center 对齐整个 div。我尝试将 textarea div 取出，但在将 textarea 相对于上述 flexbox 容器对齐时遇到了问题。如何在 x、照片、名称和对齐居中的同时实现上述文本框位置。

fiddle

.container {
  display: flex;
}
.content {
  flex-grow: 1;
}
textarea {
  width: 100%;
}
img {
  border-radius: 30px;
  margin: 0 10px;
}

<div class="container">
  <div>
    x
  </div>
  <div>
   <img src="http://via.placeholder.com/50x50">
  </div>
  <div class="content">
    <div>Brad</div>
    <div>Boston</div>
    <textarea></textarea>
  </div>
</div>

Answer 1

CSS 网格

要获得简单高效的解决方案，请使用网格布局。无需设置任何固定宽度。

.container {
  display: grid;
  align-items: center;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;  /* optional; implicit rows are auto by default */
  grid-template-areas:  "close  avatar   name    "
                        "   .     .     textbox ";
}

.container > *:nth-child(1) { grid-area: close; }
.container > *:nth-child(2) { grid-area: avatar; }
.container > *:nth-child(3) { grid-area: name; }
.container > *:nth-child(4) { grid-area: textbox; }

img {
  vertical-align: top; /* remove descender space applied to inline-level elements */
  border-radius: 30px;
  margin: 0 10px;
}
.container > * {
  border: 1px dashed red;
  box-sizing: border-box;
}

<div class="container">
  <div>x</div>
  <div>
    <img src="http://via.placeholder.com/50x50">
  </div>
  <div class="content">
    <div>Brad</div>
    <div>Boston</div>
  </div>
  <textarea></textarea>
</div>

弹性盒

如果你想坚持使用 flexbox，这是一种方法，但它需要更多细节才能正确渲染。

• 允许容器包装物品 (flex-wrap: wrap)
• 强制 textarea 到它自己的行上（例如flex-basis: 100%）
• 定义“x”和头像的宽度
• 从 textarea 宽度中减去 x 和头像的宽度
• 使用自动边距左对齐文本区域

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container > div:nth-child(-n + 2) {
  flex: 0 0 50px;
  text-align: center;
}

.container > div:nth-child(3) {
  flex: 1;
}

img {
  display:block;
  border-radius: 30px;
  margin: 0 10px;
}

textarea {
  margin-left: auto;
  flex: 0 0 calc(100% - 120px);
}

.container > * {
  border: 1px dashed red;
  box-sizing: border-box;
}

<div class="container">
  <div>x</div>
  <div>
    <img src="http://via.placeholder.com/50x50">
  </div>
  <div class="content">
    <div>Brad</div>
    <div>Boston</div>
  </div>
  <textarea></textarea>
</div>

---

Answer 2

你可以试试这样的：

.container {
  display: flex;
  align-items:center;
  flex-wrap:wrap; /* we force a wrap so textarea is in the next line*/
}
.content {
  flex-grow: 1;
}
textarea {
  flex-basis: 100%;
  margin-left:80px; /* use margin to adjust, change this value depending the icon and image width */
}
img {
  border-radius: 30px;
  margin: 0 10px;
}

<div class="container">
  <div>
    x
  </div>
  <!-- better remove the div around the image, it's useless and avoid having a white space issue -->
  <img src="http://via.placeholder.com/50x50">
  <div class="content">
    <div>Brad</div>
    <div>Boston</div>
  </div>
  <!-- we make it out of content -->
  <textarea></textarea>
</div>