How to positioning elements with CSS flexbox?

Question

I have this code:

.top-row,
.bottom-row {
  background: red;
  padding: 10px;
  display: flex;
}

.box1,
.box2,
.box3,
.box4 {
  background: green;
  padding: 10px;
  flex: 1;
}

.header {
  background: tan;
  padding: 10px;
}

.column1 {
  background: pink;
  padding: 10px;
}

.column2 {
  background: yellow;
  padding: 10px;
}

<div class="top-row">
  <div class="box1">
    <div class="header">
      <!-- this field should be left -->
      <form>
        <input type="text">
      </form>
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- this button should be right -->
      <button class="edit">edit</button>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box2">
    <div class="header">
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- these buttons should be centered -->
      <button class="edit">btn1</button>
      <button class="edit">btn2</button>
      <button class="edit">btn3</button>
      <!-- this field should be right -->
      <form>
        <input type="text">
      </form>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>
<div class="bottom-row">
  <div class="box3">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box4">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>

I have made this codepen: https://codepen.io/demiurgen/pen/zzygRb

I need help to get the left and right columns to be left and right columns. They should take up 50% of the space inside their box. Each box is supposed to be a two column layout with a header spanning the top.

Also, how do I position elements like form fields and buttons whit in a flexbox? Do I need to make another flexbox child for every element I want to position?

Answer 1

You can have nested flex-containers to achieve desired layout. You can use flex: 0 0 50% to make element 50% width and don't allow element to grow and shrink. Note that flex is shorthand for setting flex-grow, flow-shrink and flex-basis.

Also this can be achieved via setting flex: 1 0 0. This is forcing element to grow but don't grow based on content (default value is: flex: 0 1 auto, where auto means take width based on content).

Demo:

* {
  box-sizing: border-box; /* new */
}

.top-row,
.bottom-row {
  background: red;
  padding: 10px;
  display: flex;
}

.box1,
.box2,
.box3,
.box4 {
  background: green;
  padding: 10px;
  flex: 1;
  
  display: flex; /* new */
  flex-wrap: wrap; /* new */
}

.header {
  background: tan;
  padding: 10px;
  flex: 0 0 100%; /* new */
}

.column1 {
  background: pink;
  padding: 10px;
  flex: 0 0 50%; /* new */
}

.column2 {
  background: yellow;
  padding: 10px;
  flex: 0 0 50%; /* new */
}

 /* new */
.header {
  display: flex;
  flex-wrap: wrap;
}

 /* new */
.header form {
  width: 100%;
}

 /* new */
.header form input[type="text"] {
  width: 100%;
}

 /* new */
.header .add {
  margin-right: auto;
}

<div class="top-row">
  <div class="box1">
    <div class="header">
      <!-- this field should be left -->
      <form>
        <input type="text">
      </form>
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- this button should be right -->
      <button class="edit">edit</button>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box2">
    <div class="header">
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- these buttons should be centered -->
      <button class="edit">btn1</button>
      <button class="edit">btn2</button>
      <button class="edit">btn3</button>
      <!-- this field should be right -->
      <form>
        <input type="text">
      </form>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>
<div class="bottom-row">
  <div class="box3">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box4">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>

Answer 2

I think you will need to use a column container for flex to work correctly.

Like this: https://codepen.io/anon/pen/OgdLLO

.col-container {
  display: flex;
}