CSS. Flexbox

Home » Tutorials » HTML and CSS » CSS. Flexbox
One of my describer asked me i on my youtube chanel to make video tutorial on flexbox CSS topic.Today I am introducing my new tutorial with great pleasure.
Be careful before using flexbox. This approach is supported by modern browsers. You must understand two principles while using flexbox – axis and relationship between elements (parent and child). Blocks in flex container may be located in row or in column. That’s why yuo must consider two axis – main and transverse. Main axis always repeat blocks direction. Transverse is always perpendicular to the main axis. First of all you must assign display: flex to parent container. Next you can use other flex rules based on your needs. There are the list of rules and their importance below. You can see more examples in video or in code below.

For container:
display: flex;
flex-direction – child blocks direction (row or column)
justify-content – alignment of block based on main axis.
align-items – alignment of block based on transverse axis.
align-content – vertical alignment of block (works only with flex-wrap rule)
flex-wrap – lets multi rows in parent container.

For children:
flex-basis – basis size of block.
flex-grow – size based on other siblings blocks.
flex-shrink – size compression based on siblings blocks.
flex – universal rule. It units flex-grow, flex-basis, flex-shrink.
order – defines order of blocks in parent. It has zero value by default.

Code lesson (HTML)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            .parent {
                background: yellow;
                display: flex;
                flex-direction: row;
                height: 700px;
                flex-wrap: wrap;
                align-content: center;
                /*justify-content: flex-start;*/
            }

            .one {
                background: red;

            }

            .two {
                background: purple;

            }

            .three {
                background: green;

            }
        </style>
    </head>
    <body>

        <div class="parent">
            <div class="one">Блок 1</div>
            <div class="two">Блок 2</div>
            <div class="three">Блок 3</div>
        </div>

    </body>
</html>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This