代码之家 › 专栏 › 技术社区 › Mister Jojo Åukasz Daniel Mastalerz

我的flexbox怎么了?我尝试在表单元素上使用列

css html

Mister Jojo Åukasz Daniel Mastalerz · 技术社区 · 5 年前

这就是我想要的:

ââââââââââââââ
â  A  ââ     â
ââââââââ     â 
ââââââââ  B  â 
â  C  ââ     â
ââââââââ     â
       âââââââ

我所做的:

form {
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
}

fieldset { 
  display:block;
  margin-top: 1em;
  width:12em; 
}
 fieldset:nth-child(2) {
  flex:1;
  order:2;
  height:20em;
 }

<form action="" id="my-form">
  <fieldset>
    <legend> -A- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -B- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -C- </legend>
    <input type="text">
  </fieldset>
</form>

1 回复 | 直到 5 年前

Johannes 5 年前

你需要添加 height 为容器设置,否则项目将不包装,而是堆叠,因为默认情况下容器高度会根据内容进行调整:

form {
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  height: 10em;
}

fieldset { 
  display:block;
  margin-top: 1em;
  width:12em; 
}
 fieldset:nth-child(2) {
  flex:1;
  order:2;
  height:20em;
 }

<form action="" id="my-form">
  <fieldset>
    <legend> -A- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -B- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -C- </legend>
    <input type="text">
  </fieldset>
</form>