CSS Flexible Box Layout

Submitted by admin on Tue, 05/12/2020 - 16:12

CSS Flex is all about having items flow into a container.

CSS Flex is bias to working horizontally or vertically. Items can be place in one direction and still wrap to new rows/columns with: flex-wrap: wrap. Space can be divided in several ways using content-justify. Width is set with flex-basis instead of width. The order can be changes with... order.
When working in rows, the height of items on the same row will be equal by default, unless you specify align-items with flex-start or flex-end.

Some great resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-basics

 

<div class="container-2">
    <div class="container-2-box">
        <h3>Box Four</h3>
        <p>Some kind of stuff taking up space.</p>
    </div>

    <div class="container-2-box">
        <h3>Box Five</h3>
        <p>Some kind of stuff taking up space.</p>
    </div>

    <div class="container-2-box">
        <h3>Box Six</h3>
        <p>Some kind of stuff taking up space.</p>
    </div>
</div>

 

.container-2 {
    display: flex;
    justify-content: space-between;
    .container-2-box {
        flex-basis: 27%;
    }
}

 

 

 

 

Tags