Flex Syntex
flex: none /* value ‘none’ case */
flex: <‘flex-grow’> /* One value syntax, variation 1 */
flex: <‘flex-basis’> /* One value syntax, variation 2 */
flex: <‘flex-grow’> <‘flex-basis’> /* Two values syntax, variation 1 */
flex: <‘flex-grow’> <‘flex-shrink’> /* Two values syntax, variation 2 */
flex: <‘flex-grow’> <‘flex-shrink’> <‘flex-basis’> /* Three values syntax */
flex: inherit
The following shows a very simple layout with Flexbox css
body {
display: flex;
flex-wrap: wrap;
}
body > * {
background: #eee;
padding: 2rem;
text-align: center;
border: 5px solid white;
}
.header,
.footer {
flex: 1 100%;
}
.sidebar {
flex: 1;
}
.main {
flex: 2;
}The following shows a very simple layout with Flexbox HTML
<header class="header">Header</header>
<main class="main">Main</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>