CSS Flexbox¶

Flexbox is designed for laying out items in a single dimension (either as a row or column).
Flexbox is more flexible and easier to manage for responsive designs compared to floats.

The following result is equivalent

One

.flex-container {
  display: flex;
}

.box {
  height: 100px;
  min-width: 100px;
}

Two

.flex-container {
}

.box {
  height: 100px;
  min-width: 100px;
  float: left;
}

.flex-container:after {
  content: "";
  display: block;
  clear: both;
}

In [1]:

Copied!

from IPython.core.display import HTML
from IPython.core.display import HTML

flex-grow¶

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items inside the same container.
It takes a unitless value that serves as a proportion.
- If all items have a flex-grow value of 1, they will grow equally
- If one item has a flex-grow value of 2, it will take up twice the amount of space compared to an item with a value of 1.
Example

In [2]:

Copied!





HTML('''<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Grow Example</title>
    <style>
        .container {
            display: flex;
            background-color: lightgrey;
        }
        .item {
            padding: 10px;
            color: white;
        }
        .item1 {
            flex-grow: 1;
            background-color: orange;
        }
        .item2 {
            flex-grow: 2;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
    </div>
</body>''')
HTML('''
Flex Grow ExampleItem 1
Item 2

''')

Out[2]:

Flex Grow Example

Item 1

Item 2

flex-shrink¶

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items in the same container when there isn't enough space.
It takes a unitless value that serves as a proportion.
Example

In [3]:

Copied!





HTML('''
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Shrink Example</title>
    <style>
        .item2 {
            flex-shrink: 5;
        }
        .item1 {
            flex-shrink: 2;         
        }
        .item {
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
    </div>
</body>
''')
HTML('''

Flex Shrink ExampleItem 1
Item 2


''')

Out[3]:

Flex Shrink Example

Item 1

Item 2

flex-wrap¶

The flex-wrap property specifies whether the flex items should wrap onto multiple lines within a flex container.
By default, flex items will try to fit onto one line (nowrap).
Common Use: Used to allow flex items to wrap onto multiple lines for better layout control.
Example

In [4]:

Copied!





HTML('''
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Wrap Example</title>
    <style>
        .container-wrap {
            display: flex;
            flex-wrap: wrap;
            background-color: lightgrey;
        }
        .item-wrap {
            background-color: dodgerblue;
            padding: 10px;
            margin: 5px;
            color: white;
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div class="container-wrap">
        <div class="item-wrap">Item 1</div>
        <div class="item-wrap">Item 2</div>
        <div class="item-wrap">Item 3</div>
        <div class="item-wrap">Item 4</div>
        <div class="item-wrap">Item 5</div>
    </div>
</body>
''')
HTML('''

Flex Wrap ExampleItem 1
Item 2
Item 3
Item 4
Item 5


''')

Out[4]:

Flex Wrap Example

Item 1

Item 2

Item 3

Item 4

Item 5

flex-basis¶

The flex-basis property specifies the initial main size of a flex item before any space is distributed according to the flex factors (flex-grow and flex-shrink).
It can take values similar to the width property.

In [5]:

Copied!





HTML('''
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Shrink Example</title>
    <style>
        .item2 {
            flex-shrink: 5;
        }
        .item1 {
            flex-shrink: 2;         
        }
        .item {
            flex-basis: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
    </div>
</body>
''')
HTML('''

Flex Shrink ExampleItem 1
Item 2


''')

Out[5]:

Flex Shrink Example

Item 1

Item 2

In [6]:

Copied!





HTML('''
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Menu with Flexbox</title>
    <style>
        * {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 0;
        }

        body {
            background: #eee;
        }

        .wrapper {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
        }

        /* menu base styles */

        nav {
            background: #333;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
        }

        nav a {
            text-decoration: none;
            text-align: center;
            color: #fff;
            display: block;
            padding: 10px;
        }

        nav a:hover {
            background-color: #555;
        }

        /* flex styles */
        @media screen and (min-width: 768px) {
            nav ul {
                display: flex;
                justify-content: center;
            }

            nav {
                display: flex;
                justify-content: space-between;
            }

            nav li {
                flex: 1 1 0;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Store</a></li>
                <li><a href="">Contact</a></li>
            </ul>
            <ul class="social">
                <li><a href="" class="fb">Facebook</a></li>
                <li><a href="" class="tw">Twitter</a></li>
            </ul>
        </nav>
    </div>
</body>
''')
HTML('''

CSS Menu with Flexbox

Home
About
Store
Contact

Facebook
Twitter




''')

Out[6]:

CSS Menu with Flexbox

In [ ]:

CSS Flexbox¶

flex-grow¶

flex-shrink¶

flex-wrap¶

flex-basis¶

Creating a Menu with Flexbox¶