主页 / 问题 / 1302230
Accepted
another_login
Asked:2022-07-05 22:06:12 +0000 UTC2022-07-05 22:06:12 +0000 UTC

如何将 flex 拉伸到父块的大小？

  • 772

帮助，请，处理flex'om。有一个代码：

textarea {
    resize: none;
}

.formrow {
    text-align: center;
    display: block;
}

.inout-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

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

.inputs-container {
    display: flex;
    flex-direction: column;
}

.ui-element {
    border-radius: 7px;
    border-style: solid;
    border-width: thin;
    text-align: center;
    margin: 2px;
}

.button {
    display: inline-flex;
    background: #b7b7b7;
    padding: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 0px 0px #000;
    user-select: none;
}
<div class="formrow inout-container">
  <div class="column-container">
    <div class="inputs-container">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
    </div>
    <div class="buttons-container">
          <div class="button ui-element">Текст</div>
      </div>
  </div>
    <div>
    <textarea class="ui-element" cols="40" rows="15" disabled>Тут текст</textarea>
    </div>
</div>

我无法将“文本”按钮粘贴到块的底部： 像这样

是否可以在不明确指定父级的大小的情况下执行此操作？

html

1 个回答

  1. Best Answer

    对齐项目：拉伸；

    textarea {
  resize: none;
}

.formrow {
  text-align: center;
  display: block;
}

.inout-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}

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

.inputs-container {
  display: flex;
  flex-direction: column;
}

.ui-element {
  border-radius: 7px;
  border-style: solid;
  border-width: thin;
  text-align: center;
  margin: 2px;
}

.button {
  display: inline-flex;
  background: #b7b7b7;
  padding: 3px;
  cursor: pointer;
  box-shadow: 1px 1px 0px 0px #000;
  user-select: none;
}
    <div class="formrow inout-container">
  <div class="column-container">
    <div class="inputs-container">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
      <input class="ui-element" type="text">
    </div>
    <div class="buttons-container">
      <div class="button ui-element">Текст</div>
    </div>
  </div>
  <div>
    <textarea class="ui-element" cols="40" rows="15" disabled>Тут текст</textarea>
  </div>
</div>

    • 1

相关问题