Как создать пользовательскую форму с помощью flexbox?

Question

Я пытаюсь создать form используя flexbox, который будет иметь две линии.

В первом случае отобразятся все inputs и содержимое. Во втором я хочу отобразить submit button.

+----------------+--------------------------+ 
| CONTENT  |   INPUTS   | 
+----------------+--------------------------+ 
|    SUBMIT BUTTON    | 
+-------------------------------------------+ 

Вот мой код:

html, body{ 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#content{ 
 
    display: flex; 
 
} 
 
#divInside{ 
 
    position: relative; 
 
    width: 200px; 
 
    height: 155px; 
 
    text-align: center; 
 
    background-color: red; 
 
    color: white; 
 
    margin: 10px; 
 
} 
 

 
#customForm{ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#wrapperName{ 
 
    flex: 1; 
 
}

<div id="content"> 
 
    <form id="customForm" action="whatever" method="post"> 
 
    <div id="divInside"></div> 
 
    <div id="wrapperName"> 
 
     <input class="textForm" type="text" name="name" placeholder="Name"><br> 
 
     <input class="textForm" type="text" name="description" placeholder="Description"><br> 
 
    </div> 
 
    <input id="buttonLogin" type="submit" value="Submit"> 
 
    </form> 
 
</div>

Я попытался обертывание содержимое в одном DIV и inputs в другой, чтобы заполнить всю строку, но, как первый DIV (#divInside) имеет фиксированный width, я не знаю, как сделать другой div (#wrapperName) заполнить остальную часть линии и заставить button перейти к следующему линия.

Как я могу заставить button перейти к следующей строке?

Заранее благодарен!

Answer 1

Макет относительно прост с гибкими свойствами. Нет необходимости в свойствах позиционирования CSS.

#customForm { 
 
    display: flex;    /* primary flex container */ 
 
    flex-wrap: wrap;   /* enable flex items to wrap */ 
 
} 
 
#divInside { 
 
    width: 200px; 
 
    height: 155px; 
 
    background-color: red; 
 
    color: white; 
 
    margin-right: 10px; 
 
    display: flex;    /* nested flex container (for text alignment demo) */ 
 
    justify-content: center;  /* center text (optional) */ 
 
    align-items: center;   /* center text (optional) */ 
 
} 
 
#wrapperName { 
 
    flex: 1;      /* consume all available space in the line */ 
 
    display: flex;    
 
    flex-direction: column;  /* stack flex items vertically */ 
 
    justify-content: center;  /* vertical alignment */ 
 
} 
 
#buttonLogin { 
 
    flex-basis: 100%;   /* force button to its own line; take full width */ 
 
}

<form id="customForm" action="whatever" method="post"> 
 
    <div id="divInside">Content</div> 
 
    <div id="wrapperName"> 
 
    <input class="textForm" type="text" name="name" placeholder="Name"> 
 
    <input class="textForm" type="text" name="description" placeholder="Description"> 
 
    </div> 
 
    <input id="buttonLogin" type="submit" value="Submit"> 
 
</form>

Answer 2

Изменения:

• Переехал кнопку отправки из #customForm

• Сделано #wrapperName

  #wrapperName { 
  flex: 1; 
  display: flex; 
  flex-flow: column wrap; 
  align-items: space-around; 
  justify-content: center; 
  } 
  

• Удалено #content стилей.

• Добавлен атрибут form="customForm", поэтому он принадлежит к форме, находящейся вне формы.

• Голубой пунктирный контур и визуальные изменения границ и цветов предназначены только для визуальной помощи и не нужны.

  html, body{ 
   
      width: 100%; 
   
      margin: 0; 
   
  } 
   
  
   
  #content{ 
   
  
   
  } 
   
  #divInside{ 
   
      position: relative; 
   
      width: 200px; 
   
      height: 155px; 
   
      text-align: center; 
   
      border: 1px solid red; 
   
      background: rgba(255,0,0,.4); 
   
      color: white; 
   
      margin: 10px; 
   
  } 
   
  
   
  #customForm{ 
   
      display: flex; 
   
      justify-content: center; 
   
      outline: 1px dashed blue; 
   
      
   
  } 
   
  
   
  #wrapperName{ 
   
      flex: 1; 
   
      display: flex; 
   
      flex-flow: column wrap; 
   
      align-items: space-around; 
   
      justify-content: center; 
   
  }

  <div id="content"> 
   
      <form id="customForm" action="whatever" method="post"> 
   
      <div id="divInside"></div> 
   
      <div id="wrapperName"> 
   
       <input class="textForm" type="text" name="name" placeholder="Name"><br> 
   
       <input class="textForm" type="text" name="description" placeholder="Description"><br> 
   
      </div> 
   
      
   
      </form> 
   
      <input id="buttonLogin" type="submit" value="Submit" form="customForm"> 
   
  </div>