Flex-box css properties

Run

Save

Help

Keyboard Shortcuts

CTRL + Return Run fiddly
CTRL + S Save fiddly
CTRL + E New fiddly
CTRL + Shift + BackspaceReset Layout

Note: Press F11 when cursor is in the editor to toggle full screen editing.

Share link

Share full screen result

Embed on your website

HTML

<div class="flex-container">
        <div class="flex-item flex-item-1">Item 1</div>
        <div class="flex-item flex-item-2">Item 2</div>
        <div class="flex-item flex-item-3">Item 3</div>
    </div>

CSS

.flex-container {
            display: flex;
            background: pink;
            justify-content: center; /* align horizontally */
            flex-direction: row; /* row|coloum */
            /* align-items: center; */ /* align vertically */
            height: 800px;
            /* flex-wrap: wrap; */
            /* align-content: flex-end; */
        }
    
        .flex-item {
            width: 200px;
            border: 2px solid;
            margin: 10px;
            background: skyblue
        }
    
        .flex-item-1 {
            min-height: 100px;
            /* flex-shrink: 0; */
            align-self: flex-end; /* override => align-items */
            flex: 1;
            /* flex-grow: 1;
            flex-basis: 0; */
        }
    
        .flex-item-2 {
            min-height: 200px;
            /* flex-grow: 2;
            flex-basis: 0; */
            flex: 2; /* shorthand => 2(grow) 0(shrink) 0px(shrink) */
        }
    
        .flex-item-3 {
            min-height: 100px;
            /* flex-grow: 1; */
        }

Keyboard Shortcuts

Meta

Latest edits

HTML

CSS

JS