使用flex实现两行一列的布局 [英] Using flex to achieve two rows and one column layout

问题描述

我正在尝试使用flexbox来实现右侧为浮动"元素的列布局.

I'm trying to use flexbox to achieve a column layout with an element "floated" to the right.

类似的东西:

是的，我无法更改HTML，因为它是嵌入式形式，因此请尝试通过纯CSS来实现.

Thing is, I cannot alter the HTML since it's an embedded form so trying to achieve this via pure CSS.

到目前为止，我有这个:

So far, I have this:

.form {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
}

.form-form {
  width: 100%;
}

form {
  display: flex;
  justify-content: center;
}

fieldset {
  border: 0;
}

textarea {
  resize: none;
}

.form-columns-2 {
  display: flex;
}

.form-columns-2 input:first-child {
  margin-bottom: .5em
}

.form-columns-1 textarea {
  height: 100%
}
.submit-wrapper{
  flex-direction:column;
}

<div class="form">
  <div class="form-container">
    <div class="form-form">
      <form>
        <fieldset class="form-columns-2">
          <input type="text" placeholder="test">
          <input type="text" placeholder="test">
        </fieldset>
        <fieldset class="form-columns-2">
          <input type="text" placeholder="test">
          <input type="text" placeholder="test">
        </fieldset>
        <fieldset class="form-columns-1">
          <textarea placeholder="test">Text</textarea>
        </fieldset>
        <div class="submit-wrapper">
          <div class="actions">
            <input type="submit" value="Submit">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

我还需要提交按钮才能坐在文本区域下，但是由于.submit-wrapper是form的直接子项，因此，我看到的唯一解决方法是添加到form.但是，这会将整个布局变成一列，我不想.

I also need the submit button to sit under the textarea, but since the .submit-wrapper is a direct child of form, the only way I can see addressing this is by adding flex-direction: column; to form. However, this turns the whole layout into a column, which I do not want.

推荐答案

您正在将display: flex应用于错误的元素，并添加了超出您需要的元素.

You are apllying display: flex to the wrong elements and to more elements than you need to.

检查以下内容: https://codepen.io/anon/pen/dwPoEP

* {
  box-sizing: border-box;
}
fieldset{
  border:0;
}
textarea{
  resize:none;
}

form { // you want the form to be a flex box, not everything!
  display: flex;
  justify-content: center;
}
.form-columns-2 {
  display: flex; //you can use other options here, this works but you can use display: block on the inputs for example
}

// this 2 are just to make it look like the image
.form-columns-2 input:first-child {
  margin-bottom: .5em
}
.form-columns-1 textarea {
  height: 100%
}

这篇关于使用flex实现两行一列的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！