FLEXBOX WITH CSS

CSS FLEXBOX

Before Flexbox Layout, there were four layout modes:

Block, by sections on a web page
Inline, for the text
Table, for two-dimensional table data
Positioned, for the explicit position of an element

The CSS Flexbox Layout makes it easy to design flexible and responsive layout structures without using floats or positioning. To start using the Flexbox model, you must first define a flex container. The Flexible Box Module, usually referred to as a flexbox, was designed as a one-dimensional layout model and as a method that offers space distribution between elements in an interface and powerful alignment capabilities. When we describe flexbox as one-dimensional, we are describing the fact that flexbox takes care of the layout in one dimension at a time, as a row or as a column. This may be in contrast to the two-dimensional CSS Grid Layout model, which controls columns and rows together.

THE TWO AXES OF FLEXBOX

When working with flexbox you need to think in terms of two axes. The main axis and the transverse axis. The principal axis is defined by the flex-direction property and the transverse axis is perpendicular to it. Everything we do with flexbox refers to these axes; therefore, it is worth understanding how they work from the start. The main axis is defined by the flex-direction property, which has four possible values:

row
row-reverse
column
column-reverse

By choosing row or row-reverse, the main axis will scroll along the row.

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

Scegliendo column o column-reverse l’asse principale scorrerà dalla parte superiore della pagina verso il basso, nella direzione del blocco.

THE TRANSVERSAL AXIS

The transverse axis is perpendicular to the principal axis, so if flex-direction (principal axis) is set to row or reverse-row, the transverse axis runs along the columns.

If the main axis is column or reverse-column, the transverse axis runs along the rows.

THE FLEX CONTAINER

An area of a document arranged using flexbox is called a flex container. To create a flexible container, we set the value of the display property of the area container to flex or inline-flex. As soon as we do that, the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flexible container all the flexible elements contained will behave as follows.

BEHAVIOR OF FLEXIBLE ELEMENTS (FLEX ITEMS)

The items are displayed in a row (the default flex-direction property is row)
The items start from the leading edge of the main axis
Items do not extend over the main dimension, but they can shrink
The items will stretch to fill the dimensions of the transverse axis
The flex-basis property is set to auto
The flex-wrap property is set to nowrap.

The result is that the flex items will all line up in one row, using the dimension of the content as the dimension in the main axis. If there are more items than can fit into the container, there will be an overflow as the flex-wrap property defaults to nowrap (don’t wrap). If some elements are taller than others, all elements will stretch along the transverse axis to fill the entire dimension.

PROPERTIES OF THE FLEX CONTAINER

The properties of the flexible container (flex-container) are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. THE FLEX-DIRECTION PROPERTY

The flex-direction property defines in which direction the flex container wants to stack the flex items

The column value stacks the flex items vertically (from top to bottom)
Column-reverse value stacks flex items vertically (from bottom to top)
The row value stacks the flex items horizontally (from left to right)
The row-reverse value stacks the flex items horizontally (form right to left)

Copy to Clipboard

.flex-container1{
         display: flex;
         background-color: darkgreen;
         flex-direction: column;
     }
.flex-container1 > div {
         background-color: goldenrod;
         width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
     }
.flex-container2{
        display: flex;
        background-color: darkgreen;
        flex-direction:column-reverse;
    }
.flex-container2 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container3{
        display: flex;
        background-color: darkgreen;
        flex-direction:row;
    }
.flex-container3 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container4{
        display: flex;
        background-color: darkgreen;
        flex-direction:row-reverse;
    }
.flex-container4 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
h1{text-align: center;background-color: coral;border: 1px solid black;}

2. THE FLEX-WRAP PROPERTY

The flex-wrap property specifies whether flex elements should wrap or not. The following example has 12 flex items, to prove ownership.

The wrap value specifies that flex items will wrap (wrap) if necessary
The nowrap value specifies that flex items will not wrap (this is the default)
The wrap-reverse value specifies that flex items will wrap if necessary, in reverse order.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Flex Container</title>
    
</head>
<body>
    <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
    <br>
    <br>    
    <br>    
    <h1>FLEX WRAP</h1>
    <br>
    <div class="flex-container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>FLEX NO WRAP</h1>
    <div class="flex-container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>FLEX REVERSE WRAP
    </h1>
    <div class="flex-container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>PROPRIETA' FLEX FLOW</h1>
    <div class="flex-container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

Copy to Clipboard

/*--La proprietà flex-wrap specifica se gli elementi flex (flex-items)
    devono andare a capo o meno.*/
.flex-container1{
         display: flex;
         background-color: darkgreen;
         flex-wrap:wrap;
     }
.flex-container1 > div {
         background-color: goldenrod;
         width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
     }
.flex-container2{
        display: flex;
        background-color: darkgreen;
        flex-wrap: nowrap;
    }
.flex-container2 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container3{
        display: flex;
        background-color: darkgreen;
        flex-wrap: wrap-reverse;
    }
.flex-container3 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container4{
        display: flex;
        background-color: darkgreen;
        flex-flow: row wrap;
    }
.flex-container4 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
    /*--La proprietà flex-flow è una proprietà 
        abbreviata per l'impostazione delle proprietà 
        flex-direction e flex-wrap.*/
h1{text-align: center;background-color: coral;border: 1px solid black;}
h1.header{text-align: center;background-color: yellow;border: 1 px solid red;}

3.THE FLEX-FLOW PROPERTY

The flex-flow property is a shorthand property for setting the flex-direction and flex-wrap properties.

4. THE JUSTIFY-CONTENT PROPERTY

The justify-content property is used to align flex items:

The center value aligns the flex items to the center of the container
The flex-start value aligns the elements to the beginning of the container (this is the default)
The flex-end value aligns the flex items at the end of the container
The space-around value shows flex items with a space before, between and after the lines
The space-between value shows flex items with a space between lines

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    justify-content:center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   justify-content: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   background-color: darkgreen;
   justify-content: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   justify-content: space-around;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
    display: flex;
    background-color: darkgreen;
    justify-content: space-between;
 }
 .flex-container5 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
 }
h1{text-align: center;background-color: coral;border: 1px solid black;}

5. THE ALIGN-ITEMS PROPERTY

The align-items property is used to align flex items. The following figure shows an example with align-items center:

The center value aligns the flex items to the center of the container
The flex-start value aligns the flex items at the top of the container
The flex-end value aligns the flex items at the bottom of the container
The stretch value extends the flex items to fill the container (this is the default)
The base-line value aligns the flex items as the baselines are aligned

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    height: 200px;
    align-items:center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   height: 200px;
   background-color: darkgreen;
   align-items: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items: stretch;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items:baseline;
}
.flex-container5 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
h1{text-align: center;background-color: coral;border: 1px solid black;}

6. THE ALIGN-CONTENT PROPERTY

The align-content property is used to align flex lines.

The space-between value shows flex lines with equal space between them
The space-around value shows flex lines with a space before, in between and after them
The stretch value stretches the flex lines to take up the remaining space (this is the default)
The center value displays show the flex lines in the center of the container
The flex-start value shows the flex lines at the beginning of the container
The flex-end value shows the flex lines at the end of the container

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Flex Container</title>
    
</head>
<body>
    <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
    <br>
    <br>
    <br>
    <h1>ALIGN CONTENT CENTER</h1>
    <br>
    <div class="flex-container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT FLEX-START</h1>
    <div class="flex-container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT FLEX-END
    </h1>
    <div class="flex-container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT SPACE BETWEEN</h1>
    <div class="flex-container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT SPACE AROUND</h1>
    <div class="flex-container5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    height: 600px;
    flex-wrap: wrap;
    align-content: center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content:space-between;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
    display: flex;
    background-color: darkgreen;
    height: 600px;
    flex-wrap: wrap;
    align-content:space-around;
 }
 .flex-container5 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
 }
h1{text-align: center;background-color: coral;border: 1px solid black;}
h1.header{text-align: center;background-color: yellow;border: 1 px solid red;}

CSS FLEX ITEMS

Direct children of a flex container automatically become flex items. The properties of the flex item are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

NB: All these properties are explained in the example code.

Copy to Clipboard

<!DOCTYPE html>
        <html lang="it">
        <head>
            <meta charset="UTF-8">
            <title>Flex Items</title>
            <style>
                .flex-container {
                  display: flex;
                  align-items: stretch;
                  background-color:darkgreen;
                  height: 200px;
                }
                .flex-container>div {
                  background-color: goldenrod;
                  color: white;
                  width: 100px;
                  margin: 10px;
                  text-align: center;
                  line-height: 75px;
                  font-size: 30px;
                }
                h1{text-align: center;background-color: coral;border: 1px solid black;}
                </style>
        </head>
        <body>
            <h1>PROPRIETA' ALIGN-SELF</h1>
            <br>
            <div class="flex-container">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div style="align-self:center">6</div>
                <div>7</div>
                <div>8</div>
            </div>
        </body>
        </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            </style>
    </head>
    <body>
        <h1>PROPRIETA' FLEX</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex: 0 0 200px">6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
    </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            </style>
    </head>
    <body>
        <h1>PROPRIETA' FLEX-BASIS</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex-basis: 400px">6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
    </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            h1.header{text-align: center;background: yellow;border: 1px solid red;}
            </style>
    </head>
    <body>
        <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
        <br>
        <br>  
        <br>   
        <h1>PROPRIETA' FLEX-SHRINK</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex-shrink: 0">6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </body>
    </html>

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB

CSS FLEXBOX

THE TWO AXES OF FLEXBOX

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

THE TRANSVERSAL AXIS

THE FLEX CONTAINER

BEHAVIOR OF FLEXIBLE ELEMENTS (FLEX ITEMS)

PROPERTIES OF THE FLEX CONTAINER

CSS FLEX ITEMS

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

FLEXBOX WITH CSS

FLEXBOX WITH CSS

CSS FLEXBOX

THE TWO AXES OF FLEXBOX

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

THE TRANSVERSAL AXIS

THE FLEX CONTAINER

BEHAVIOR OF FLEXIBLE ELEMENTS (FLEX ITEMS)

PROPERTIES OF THE FLEX CONTAINER

CSS FLEX ITEMS

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Related Posts

SIMPLE SELECTORS IN CSS

OTHER CSS SELECTORS

COLORS IN CSS

UNDERSTANDING THE BOX MODEL IN CSS

POSITIONING WITH CSS

MEDIA QUERIES

THE FONTS IN THE CASCADE STYLE SHEETS

Leave A Comment Cancel reply

Categories

Archive