To properly view this code, it is recommended to fullscreen it or open it in the editor as the preview may not display correctly. This will help you understand the structure better.
Unnecessary code has been removed for clarity and focus on the main content.
If you want to learn more about flexbox, check out this helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The key CSS property to initiate a flex container is display: flex; It establishes a flex context for its direct children.
flex-direction row is set by default, displaying items from left to right.
flex-wrap By default, flex items attempt to fit on one line, so setting it to wrap allows them to wrap onto new lines when necessary.
To space the items inside the flexbox, use .flexbox item with a width of 28% or any division that fits between a fourth and a third of the total width minus margins. This will create rows of three.
Alignment:
justify-content determines alignment along the main axis.
align-items sets the default layout of flex items on the cross axis of each line.
align-content aligns the lines within the flex container.
flex-start (default): items are positioned towards the start line
flex-end: items are positioned towards the end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item at the start line, last item at the end line
space-around: items are equally distributed with space around them. Note that visually the spaces aren't equal due to varying individual spacing.
Quote from CSS Tricks
main {
display: flex;
align-items: center;
padding: 1%;
background: #ff0000;
}
header span {
display: flex;
padding: 1%;
margin: auto;
}
.nav {
background: #008000;
color: #fff;
text-align: center;
}
.flexbox {
display: flex;
justify-content: space-between;
text-align: center;
height: auto;
padding: 1%;
flex-wrap: wrap;
}
.flexbox item {
width: 30%;
padding: 1% 2%;
background: #00ffff;
margin: 1% 0;
align-self: center;
}
.footer {
background-color: purple;
padding: 2%;
display: flex;
justify-content: space-around;
text-align: center;
}
.footer item {
padding: 1% 2%;
background: #eee;
border-radius: 5px;
width: 30%;
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main>
<header class="nav">
<span>< Prev / Next ></span>
</header>
<div class="flexbox">
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
</div>
<div class="footer">
<item>Open</item>
<item>Clear</item>
<item>Close</item>
</div>
</main>
</body>