嵌套的 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

您可以尝试这样的操作：

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

Answer 2

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)
强制文本区域到它自己的行（例如 flex-basis: 100%）
定义 "x" 和头像的宽度
从文本区域宽度中减去 x 和头像的宽度
Left-align 具有自动边距的文本区域

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

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

Nested flexbox align-items center specific content

html

css

flexbox

css-grid

CSS 网格

弹性框