How to positioning elements with CSS flexbox? - css

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;
}