flexbox list items - layout examples

by ian_smithz

HTML

<ul>
<li><a href="http://jonibologna.com/content/images/flexboxsheet.pdf">flex basic cheatsheet</a>
</li>
<li><a href="https://www.w3schools.com/css/css3_flexbox.asp">W3 schools flex</a>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">flex</a>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex grow</a>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">flex shrink</a>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">flex wrap</a>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">flex centre content</a>
</li>
<li><a href="https://codeburst.io/a-simple-cheatsheet-for-flexbox-f5d3e1658447">flex cheatsheet</a>
</li>
<li><a href="https://yoksel.github.io/flex-cheatsheet/#flex-direction">flex cheatsheet</a>
</li>
<li><a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">flex cheatsheet</a>
</li>
<li><a href="https://darekkay.com/dev/flexbox-cheatsheet.html">flex cheatsheet</a>
</li>
<li><a href="https://www.sketchingwithcss.com/samplechapter/cheatsheet.html">flex cheatsheet</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical_Use_Cases_of_Flexbox</a>
</li>
<li>
<a href="https://www.w3schools.com/css/css3_flexbox.asp">w3schools guide to flex</a>
</li>
<li>
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css trcks guide to flex</a>
</li>
<li><a href="https://codepen.io/rachelandrew/pen/evjdLM">Flexbox vs CSS Grids</a></li>
</ul>

<hr>

<!-- ############### START LAYOUTS #################  -->

<h3>section 1</h3>

<section class="wrapper">

<h4>Flex item - nowrap</h4>

    <ul class="flex flex_item flex_nowrap cards">
        <li>
            <h2>Card 1</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing
           ...

CSS

@supports not (flex-wrap: wrap) {

}

/* DEMO STYLES */


.wrapper {
    margin: 0 auto;
    max-width: 1148px;
    padding: 0 4px;
    border: 1px solid #000;
}


.cards {
    /* using a list as it's more semantic than divs */
    list-style: none;
    margin: 0;
    padding: 0;
}

.cards > * {
    border: 1px solid #490A3D;
    background-color: #215f8b;
    color: #fff;
}

.cards h2 {
    background-color: #490A3D;
    margin: 0;
    padding: 10px;
}

.cards p {
    padding: 10px;
}

/* FLEX DISPLAY */

.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* FLEX NO WRAP ITEMS */

.flex.flex_nowrap {
    flex-wrap: nowrap;
}


.flex_item > * {
	flex: 1;
}

/* FLEX LAYOUTS */

.flex_basis_200 li {
    flex: 0 0 200px;
}

.flex_basis_25_percent li {
    flex: 0 0 calc(25% - 20px);;
}

.flex_basis_33_percent li {
    flex: 0 0 calc(33.3333% - 20px);
}

.flex_basis_50_percent li {
    flex: 0 0 calc(50% - 20px);;
}

/* FLEX GUTTERS */

.flex_gutter {
    /* no smart way of replicating grid gap - yet */
  margin: 0 -10px;
}

.flex_gutter > * {
    margin: 10px;
}

/* FLEX CENTRE CLASSES */

.flex_center_horizontal {
    justify-content: center;
}

.flex_center_vertical {
    align-items: center; 
}

/* OPTIONAL - FLEX SHORTHAND */

/* With this shorthand you define flex-grow with the first, flex-shrink with the second, and flex-basis with the third argument. 

e.g. 
.flex-item {
    flex: 0 1 300px;
}

You do not have to fill in three values, only one.

Flex basis is the inital item width loaded in the browser and also the point where items will stack if the defined width can no longer fit in the browser. 

*/

/* flex basis = the initial main size of the flex item, before free space is distributed */