Exploring align-content

scrimba

Watch in fullscreen

by Kevin Powell

Learn Responsive Web Design

About

Comments

Notes

flex-grow and flex-shrink explained5:06

Exploring align-content

by Kevin Powell

Learn Responsive Web Design

Expand for more info

flex-grow and flex-shrink explained5:06

index.html

run

preview

console

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Understanding flexbox!</h1>
        
        <div class="flex-container">
            <div class="flex-item">flex item 1</div>
            <div class="flex-item big">flex item 2</div>
            <div class="flex-item">flex item 3</div>
            <div class="flex-item">flex item 4</div>
            <div class="flex-item">flex item 5</div>
        </div>
    </body> 
</html>

<html>

<head>

</head>

<body>

<h1>Understanding flexbox!</h1>

</div>

</body>

</html>

-4:23