Flex - Flex is the value of the CSS display property.

Documents

Title: Flex

Description: Flex is the value of the CSS display property.

Category: Layout

Basic markup


        <style>
            .flex{
                display: flex;
                align-content: strech;
                align-items: strech;
                flex-direction: row;
                flex-wrap: no-wrap;
                justify-content: flex-start;
            }
        </style>

Related: Flex Table
Responsive table using “display: flex;”.
Not supported for rowspan.; Grid Layout
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flex</title>
    <style>
        .box{
            font-size: 12px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            margin: 5px;
            padding: 15px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .12),
            0 1px 2px rgba(0, 0, 0, .24);
        }
        .box:nth-child(odd){
            color: #fff;
            background: #009485;
        }
        .box::before{
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            position: absolute;
            right: 5px;
            bottom: 0;
            padding: 3px;
            content: counter(number);
            counter-increment: number;
            opacity: .25;
        }
        [class^='flex-']{
            display: flex;
            max-width: 640px;
            counter-reset: number;
            border: 15px solid #ccc;
            background: #acacac;
        }
        /* [1] flex-direction */
        /* : row  */
        .flex-1-1{
            flex-direction: row;
            flex-wrap: nowrap;
        }
        /* : row-reverse */
        .flex-1-2{
            flex-direction: row-reverse;
        }        
        /* : column */
        .flex-1-3{
            flex-direction: column;
        }
        /* : column-reverse */
        .flex-1-4{
            flex-direction: column-reverse;
        }
        /* [2] flex-wrap */
        /* : nowrap */
        .flex-2-1{
            flex-wrap: nowrap;
        }
        /* : wrap */
        .flex-2-2{
            flex-wrap: wrap;
        }
        /* : wrap-reverse */
        .flex-2-3{
            flex-wrap: wrap-reverse;
        }
        /* [3] flex-flow: row-reverse wrap */
        .flex-3{
            flex-flow: row-reverse wrap;
        }
        /* [4] justify-content */
        /* : flex-start */
        .flex-4-1{
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        /* : flex-end */
        .flex-4-2{
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        /* : center */
        .flex-4-3{
            flex-wrap: wrap;
            justify-content: center;
        }
        /* : space-between */
        .flex-4-4{
            flex-wrap: wrap;
            justify-content: space-between;
        }
        /* : space-around */
        .flex-4-5{
            flex-wrap: wrap;
            justify-content: space-around;
        }
        [class^='flex-5-']{
            height: 200px;
        }
        /* [5] align-items */
        /* : stretch */
        .flex-5-1{
            align-items: stretch;
            flex-wrap: wrap;
        }
        /* : flex-start */
        .flex-5-2{
            align-items: flex-start;
            flex-wrap: wrap;
        }
        /* : flex-end */
        .flex-5-3{
            align-items: flex-end;
            flex-wrap: wrap;
        }
        /* : center */
        .flex-5-4{
            align-items: center;
            flex-wrap: wrap;
        }
        /* : baseline */
        .flex-5-5{
            align-items: baseline;
            flex-wrap: wrap;
        }
        .flex-5-5 .box1{
            padding-top: 50px;
        }
        .flex-5-5 .box2{
            padding-top: 30px;
        }
        .flex-5-5 .box3{
            padding-bottom: 50px;
        }
        .flex-5-5 .box4{
            padding-top: 30px;
            padding-bottom: 30px;
        }                  
        [class^='flex-6-']{
            max-width: 320px;
            height: 400px;
        }
        /* [6] align-content */
        /* : stretch */
        .flex-6-1{
            align-content: stretch;
            flex-wrap: wrap;
        }
        /* : flex-start */
        .flex-6-2{
            align-content: flex-start;
            flex-wrap: wrap;
        }
        /* : flex-end */
        .flex-6-3{
            align-content: flex-end;
            flex-wrap: wrap;
        }
        /* : center */
        .flex-6-4{
            align-content: center;
            flex-wrap: wrap;
        }
        /* : space-between */
        .flex-6-5{
            align-content: space-between;
            flex-wrap: wrap;
        }
        /* : space-around */
        .flex-6-6{
            align-content: space-around;
            flex-wrap: wrap;
        }
        /* [7] order */
        .flex-7{
            flex-wrap: wrap;
        }
        .flex-7 .box1{
            order: 3;
        }
        .flex-7 .box2{
            order: 1;
        }
        .flex-7 .box3{
            order: 4;
        }
        .flex-7 .box4{
            order: 5;
        }
        .flex-7 .box5{
            order: 2;
        }
        /* [8] flex-grow */
        .flex-8 .box1{
            flex-grow: 2;
        }
        .flex-8 .box2{
            flex-grow: 3;
        }
        .flex-8 .box3{
            flex-grow: 0;
        }
        /* [9] flex-shrink */
        .flex-9 .box1{
            flex-shrink: 2;
        }
        .flex-9 .box2{
            flex-shrink: 3;
        }
        .flex-9 .box3{
            flex-shrink: 1;
        }
        .flex-9 .box4{
            flex-shrink: 2;
        }
        .flex-9 .box5{
            flex-shrink: 3;
        }
        /* [10] flex-basis */
        .flex-10 .box1{
            flex-basis: 150px;
        }
        .flex-10 .box2{
            flex-basis: 10%;
        }
        .flex-10 .box3{
            flex-basis: 20%;
        }
        .flex-10 .box4{
            flex-basis: 40px;
        }
        .flex-10 .box5{
            flex-basis: auto;
        }

    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">Flex</h1>
        <p class="dlw-description">Flex is the value of the CSS display property.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Defining the direction flex items <code>flex-direction</code></h2>
        <h3 class="dlw-lead">flex-direction: row (Default)</h3>
        <P>The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.</P>
        <div class="flex-1-1">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
        <h3 class="dlw-lead">flex-direction: row-reverse</h3>
        <p>Behaves the same as row but the main-start and main-end points are permuted.</p>
        <div class="flex-1-2">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
        <h3 class="dlw-lead">flex-direction: column</h3>
        <p>The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.</p>
        <div class="flex-1-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>        
        <h3 class="dlw-lead">flex-direction: column-reverse</h3>
        <p>Behaves the same as column but the main-start and main-end are permuted.</p>
        <div class="flex-1-4">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Defining the wrapped flex items <code>flex-wrap</code></h2>
        <h3 class="dlw-lead">flex-wrap: no-wrap (Default)</h3>
        <p>The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value.</p>
        <div class="flex-2-1">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
        <h3 class="dlw-lead">flex-wrap: wrap</h3>
        <p>The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.</p>
        <div class="flex-2-2">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
        <h3 class="dlw-lead">flex-wrap: <code>wrap-reverse</code></h3>
        <p>Behaves the same as wrap but cross-start and cross-end are permuted.</p>
        <div class="flex-2-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Shorthand direction & wrapped <code>flex-flow</code></h2>
        <h3 class="dlw-lead">flex-flow: {flex-direction} {flex-wrap}</h3>
        <p>Define flex-direction and flex-wrap collectively.</p>
        <div class="flex-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Alignment the main axis <code>justify-content</code></h2>
        <h3 class="dlw-lead">justify-content: flex-start</h3>
        <p>Pack flex items from the start.</p>
        <div class="flex-4-1">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
        <h3 class="dlw-lead">justify-content: flex-end</h3>
        <p>Pack flex items from the end.</p>
        <div class="flex-4-2">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
        <h3 class="dlw-lead">justify-content: center</h3>
        <p>Pack items around the center.</p>
        <div class="flex-4-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
        <h3 class="dlw-lead">justify-content: space-between</h3>
        <p>Distribute items evenly (Fit at both ends).</p>
        <div class="flex-4-4">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
        <h3 class="dlw-lead">justify-content: space-around</h3>
        <p>Distribute items evenly (The same space on both ends of the item).</p>
        <div class="flex-4-5">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
            <div class="box">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
                quis, feugiat a, tellus.</div>
            <div class="box">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                augue. Curabitur ullamcorper ultricies nisi.</div>
            <div class="box">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
                amet adipiscing sem neque sed ipsum.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] Alignment the cross axis <code>align-items</code></h2>
        <h3 class="dlw-lead">align-items: stretch (Default)</h3>
        <p>Flex items stretch to full parent element (respect min-width/max-width).</p>
        <div class="flex-5-1">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-items: flex-start</h3>
        <p>Flex item aligns with top of parent element.</p>
        <div class="flex-5-2">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-items: flex-end</h3>
        <p>Flex item aligns with bottom of parent element</p>
        <div class="flex-5-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-items: center</h3>
        <p>Flex item aligns with center of parent element</p>
        <div class="flex-5-4">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-items: baseline</h3>
        <p>Flex item aligns with baseline of parent element</p>
        <div class="flex-5-5">
            <div class="box box1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box box2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box box3">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box box4">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] <code>align-content</code></h2>
        <p></p>
        <h3 class="dlw-lead">align-content: strech (Default)</h3>
        <p></p>
        <div class="flex-6-1">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-content: flex-start</h3>
        <div class="flex-6-2">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-content: flex-end</h3>
        <div class="flex-6-3">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-content: center</h3>
        <div class="flex-6-4">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-content: space-between</h3>
        <div class="flex-6-5">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
        <h3 class="dlw-lead">align-content: space-around</h3>
        <div class="flex-6-6">
            <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[7] <code>Order</code></h2>
        <p></p>
        <div class="flex-7">
            <div class="box box1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box box2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box box3">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box box4">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box box5">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[8] <code>flex-grow</code></h2>
        <p></p>
        <div class="flex-8">
            <div class="box box1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box box2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box box3">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[9] <code>flex-shrink</code></h2>
        <p></p>
        <div class="flex-9">
            <div class="box box1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box box2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box box3">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box box4">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box box5">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[10] <code>flex-basis</code></h2>
        <p></p>
        <div class="flex-10">
            <div class="box box1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
            <div class="box box2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
            <div class="box box3">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <div class="box box4">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
                a, venenatis vitae, justo.</div>
            <div class="box box5">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                Aenean vulputate eleifend tellus.</div>
        </div>
    </section>
</body>
</html>

Comment

Search

Style Design: Text Style DesignCSS
Here, design samples of various effects to text are posted.; Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.; OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.; HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.; Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout: How to specify a breakpoint and switch imagesJS
Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.; Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.; FlexCSS
Flex is the value of the CSS display property.

Link & Button: Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Button.cssCSS
Button.css is collection of CSS3 button animations.

Card: Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.

Text: Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.; Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media: FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.; YouTube Embed
Introduction of various embedment methods of YouTube.; FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.; xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.; Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.

Date: Moment.jsJS
Moment.js is a javascript that processes and displays date and time.; Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table: MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.; Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan.; Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Form: jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.; Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.; jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.; FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.; slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.; slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox: fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.; fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.; Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.; Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.; Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.; GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.; jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.; metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.; fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.; Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.; Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.; Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; ScrollajQuery
Scrolla is jQuery scroll animation plugin.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.; jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background: fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip: Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.; ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social

Framework: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.; Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Cheat Sheet: HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub; CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine; Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.; GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other: Google Search
On this page you can search for codes collectively.; Design News
It is a news feed about design.