嵌套的flexbox对齐项将特定内容居中

Question

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

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

小提琴

.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>