display: flex

purpose¶

flex is another modern layout engine that tries to solve or at least alleviate
the obvious deficiencies of the old-school block model and related tools

as opposed to grids, it is concerned with 1-dimension flow of data
it complements nicely what is doable with grids

ex1 - default is `row nowrap`¶

by default, direction: row, wrap: nowrap

let flex1_html = `<div class="container">
<div class="item"> Dolor quiquia </div>
<div class="item"> aliquam </div>
<div class="item"> sed numquam </div>
<div class="item"> voluptatem </div>
<div class="item"> quisquam modi. </div>
</div>`

let flex1_css = `/* the important part is just this */
.container {
    display: flex;
    justify-content: space-evenly;
}

/* cosmetic: outline borders */
body {
    border: none;
}
* { border: 1px solid red;
    padding: 4px; border-radius: 4px;}

.item {
    font-size: 30px;
}
`

await tools.sample_from_strings({html: flex1_html, css: flex1_css}, {id: 'flex1', start_with: 'css'})

ex2 - `flex-wrap: wrap`¶

identical except that we specify flex-wrap: wrap

let flex2_html = `<div class="container">
<div class="item"> Dolor quiquia </div>
<div class="item"> aliquam </div>
<div class="item"> sed numquam </div>
<div class="item"> volup&shy;tatem </div>
<div class="item"> quisquam modi. </div>
</div>`

let flex2_css = `.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* outline borders */
body { border: none; }
* { border: 1px solid red;
    padding: 4px; border-radius: 4px;}

.item {
    font-size: 40px;
}
`

await tools.sample_from_strings({html: flex2_html, css: flex2_css}, {id: 'flex2', start_with: 'css'})

assignment: the css-tricks page¶

the flex display is an extremely powerful tool for fine-grained control over your layout
to deepen your understanding of it :

this page on css-trick.com is an easy, and very complete, read on flex
it is again strongly recommended that you browse it thoroughly to get a perception of what is doable with this layout

grid’s and flex’s¶

as mentioned earlier, both display policies have their own pros and cons
you should not think in terms or one or the other
but rather in terms of using both depending on the situation
so do not hesitate to define nested layouts
with flex’s in grid’s in flex’s in grid’s ... as needed
this is why the <div> tag is soooo all over the place

practice: layout a header¶

mimick the layout below

await tools.sample_from_stem("../samples/23-exo-flex", {sources_show: false})

optional activity

Flexbox Froggy https://flexboxfroggy.com/ is a game to practice the flexbox properties

challenge (optional)¶

if you believe you have a full understanding of how CSS layouts work,
you should give this test a shot (and you will feel more humble afterwards ;-)