DEV Community

Cover image for Here are Flex-Box Container Properties
Chelsea Chemweno
Chelsea Chemweno

Posted on

Here are Flex-Box Container Properties

#css #html #flex #beginners

Under the Flex Container Properties it is categorized into six:-

  1. Flex Direction
  2. Flex Wrap
  3. Flex Flow
  4. Justify- Content
  5. Align Item
  6. Align Content Image description

1. Flex Direction

Apply the flex properties to the parent element that has the child

The direction could be either raw or column.

HTML DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
       <div id="one">item One</div>
       <div id="two">item two</div>
       <div id="three">item Three</div>
       <div id="four">item Four</div>
    </div> 
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT COLUMN DIRECTION

/*parent container */
.container {
    display: flex;
    flex-direction:column;
    border: 2px solid black;
    padding: 80px ;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 10vw;
    border: 2px solid black;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOUMENT RAW DIRECTION 

/*parent container */
.container {
    display: flex;
    flex-direction: row;
    border: 2px solid black;
    padding: 80px 80px 80px 80px;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 8vw;
    border: 2px solid black;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

2. Flex Wrap

This feature specifies the items to wrap on resizing the into of the browser or the webpage. It is normally used to adjust the child elements and it is normally applied to the parent element.

The Flex Wrap holds three values flex no-wrap, Flex Wrap, and Wrap –Reverse

HTML DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Angela </div>
        <div>Tom</div>
        <div>Mary</div>
        <div> John</div>
    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT FLEX WRAP :NO-WRAP

This is a default value of the flex box which specifies the parent element that its child elements should not be wrapped or adjusted.

/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: nowrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    Gap: 20px;
}
/*Child Elements*/
.container> div {
    Padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT FLEX WRAP :WRAP

With this one it specifies that all the child elements in the parent should be wrapped or adjusted accordingly.

/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS FLEXWRAP REVERSE : WRAP REVERSE

/* Parent Elemnts*/
.container {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

3.Flex-Flow

Among the Flex container properties, the flex- flow for both flex direction and flex wrap. However, if the elements are not flexible items then the flex flow property will not be in effect.

CSS DOCUMENT FLEX FLOW

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
Enter fullscreen mode Exit fullscreen mode

4.Flex Justify Content

This property is used to align items along the main axis. There are two types of Flex-Justify Content.

• Raw Justify Content ( Aligns items along the horizontal axis )

• Column Justify Content ( Aligns items along the vertical axis )

They are then further divided into five values:-

Justify Content : Flex- Start
Justify Content : Centre
Justify Content : Flex-End
Justify Content : Flex-Around
Justify Content : Space Between

HTML DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
        <div>Mango</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Justify – Content : Flex Start

It has a responsibility of aligning items at the beginning of the parent container. It is also known as the default value.

/*Parent Element */
.container {
    display: flex;
    justify-content: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Justify Content: Centre

It aligns all the flex items at the Centre of the parent container.

/*Parent Element */
.container {
    display: flex;
    justify-content: center;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Justify Content : Flex –End

With this one it aligns all the items at the end of the parent container.

/*Parent Element */
.container {
    display: flex;
    justify-content: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Justify Content :Space – Around

In this kind space is created between and after the lines .

/*Parent Element */
.container {
    display: flex;
    justify-content: space-around;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Flex content :Space –Between

Here there is space in between the elements.
Since we have dealt the alignment of items in the main axis, let us look at the positioning of the cross axis. This involves the aligning of items and the alignment of content.

5.Align Items

When aligning items, there are two things to consider. One, if the container is set to row then the child elements will be in a vertical position. While if the container is set to column, then the child elements while be in a horizontal position.

In aligning items in flex box there are five values that you need to consider.

Align Items :Flex-Start
Align Items :Flex-End
Align Items : Centre
Align Items : Base-Line
Align Items : Stretch

N/B: In all the below examples I will use the row direction which is the default

HTML DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Items : Flex – Start

Here the items are arranged at the top of the container.

/*Parent Element */
.container {
    display: flex;
    align-items: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Items : Flex-End

This aligns elements at the bottom of the parent container.

/*Parent Element */
.container {
    display: flex;
    align-items: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Items : Centre

These items are arranged at the center of the parent container

/*Parent Element */
.container {
    display: flex;
    align-items: center;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Items : Base Line

Here items are arranged in the base axis. This Is irrespective of their item size

/*Parent Element */
.container {
    display: flex;
    align-items: baseline;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Items :Stretch

It stretches out the container to items in order to fill the container.

/*Parent Element */
.container {
    display: flex;
    align-items: stretch;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
    height: 70vh;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

6.Align Content

Aligning Content is used to control the spaces in between the rows. It is also known as packing flex lines and takes place in the cross axis.

When the direction is row, align content is used to align flex lines along the vertical axis .

When the direction is column, align content is used to align flex lines along the horizontal axis .

It takes out the following values:-
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch

HTML DOCUMENT 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div> Flex Item 1</div>
    <div> Flex Item 2</div>
    <div> Flex Item 3</div>
    <div> Flex Item 4</div>

  </div> 
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

N/B All my examples are on row as a direction of default.

CSS DOCUMENT Align Content : Flex-Start

Aligns the flex lines on top of the parent container

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Content :Flex –End

This one aligns the flex lines at the bottom of the container.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Content :Flex –Centre
Aligns the flex lines at the middle of the parent container

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Content :Space –Between

The space between the flex lines

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Content : Space- Around

Flex Lines with spaces around them

.

container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

CSS DOCUMENT Align Content :Stretch
The flex lines are stretched to fill out the container.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

culterra profile image

Framed Art of Dolomites Italy by Culterra

Culterra -

carrie_luo1 profile image

What is LTS in Software Versions?

Carrie -

mohammad_shakibul_d110bb5 profile image

What is AI and How Does It Work? A Beginner’s Guide

Mohammad Shakibul -

roshankrsoni profile image

🚀 React Native's New Architecture Brings 550% Speed Boost

Roshan Kr Soni -