CSS Flexbox Layout module

What is Flexbox?
The flexbox is a flexible box designed to build one-dimensional layouts in CSS. One-dimensional means flexbox can build a layout in one dimension at one time. For two-dimensional layouts, use CSS Grids that can handle both rows and columns.

Diagram of how flexbox works

A flexbox layout consists of a flex container (display: flex) that contains a flex item. Flex containers can be aligned horizontally (flex-direction: row or row-reverse ) or vertically (flex-direction: column or column-reverse ).

The direct children of a flex container are aligned along the main axis. These children can “flex” their sizes, growing to fill unused container space, or shrinking to avoid overflowing.

This is you guys right now, let’s make this definition simpler by exploring more about flexbox

The flex container properties are:
flex-direction| flex-wrap|flex-flow | justify-content| align-items| align-content

Flexbox Elements

To start using the flexbox model you need to define a flex container(display: flex).
Direct child elements of the flexible container automatically become flexible items.
Follow the code below, we will explore every property of flex

<!-- HTML CODE -->
<div class="container">
  <section class="flex-container">
    <div class="flex-item flex-item-1"> flex-item-1 </div>
    <div class="flex-item flex-item-2"> flex-item-2 </div>
    <div class="flex-item flex-item-3"> flex-item-3 </div>
    <div class="flex-item flex-item-4"> flex-item-4 </div>
    <div class="flex-item flex-item-5"> flex-item-5 </div>
  </section>
</div>

/* CSS CODE */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background-color: #eeeeee;
    color: #263238;
    padding: 60px 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.flex-container {
    display: flex;  /* or inline-flex */
}

.flex-item {
    width: 300px;
    padding: 40px 80px;
    margin: 10px;
    text-transform: capitalize;
    background-color: #4a148c;
    color: white;
}

The output of the above code (Grey portion is the flex container and purple cards are its direct children’s.

Parent Element (Flex Container)

In our code flex-container is the parent container. Parent container property contains :

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

display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

.flex-container{
  display:flex; /* inline-flex */
}

flex-direction

The flex-direction decides in which direction the child element of flex-container should flow (horizontal or vertical). By default, it is row(a horizontal direction).

/*update the flex-container class in your css */
.flex-container{
  display: flex;
  flex-direction: column;
}

/*Try other flex-direction values:*/ 
flex-direction: row|row- reverse|column|column-reverse|initial|inherit;

Output when you apply flex-direction: column

flex-wrap

The flex-wrap: wrap the value specifies that the flex items will wrap if necessary.

//Add this property to your flex-container class
.flex-container{
  ...
  flex-wrap: wrap;
}

/*Try other flex-wrap values: */
 flex-wrap: no-warp |wrap |wrap-reverse;

The output of the above code

flex-flow

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

.flex-container {
  ...
  flex-flow: row wrap;
}

justify-content

The justify-content property is used to align the flex items. Its default value is flex-start . Below we have used value center

/*update the flex-container class in your css */
.flex-container {
  ...
  justify-content: center;
}

/*Try other justify-content values:*/ 
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

The center value aligns the flex items at the center of the container

align-items Property

The align-items property is used to align the flex items vertically

// Add this property to your flex-container class
.flex-container {
  ...
  align-items: center;
  background-color: black;
}

/*Try other align-item values: */
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit ;

To demonstrate vertical alignment add height property to a flex-container class.

align-content

The align-content the property specifies how flex lines are distributed along the cross-axis in a flexbox container.

In the flexbox layout, the main axis is in the flex-direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).

Tip: Use the justify-content property to align the items on the main axis (horizontally)

// Add this two property to your flex-container class
.flex-container{
  ...
  height: 800px;
  align-items: flex-start;
}

Difference between align-items: center and align-content: center

Flex Child (flex-items)

The flex item properties are:
flex-grow| flex-shrink|flex-basis | flex| align-self| align-self| order

flex-grow

flex-grow specifies how much the flex-item (child) would occupy the space available in its flex-container (parent).
Its default value is 0, considering all the flex-item haveflex-grow 1 then the available space will be distributed equally.
If one of the flex-item has a value of 3, that child will take up thrice as much of the space if available.

.flex-item-3{
    flex-grow: 1;  //other values 2,3,4,..n
}

In the above example we kept 3 child element (flex-item) and gave flex-item-3 (3rd child) flex-grow:1. Try with flex-direction: column

flex-shrink

flex-shrinkspecifies how much the flex-item (child) would shrink compared to its sibling.

 <section class="flex-container">
    <div class="flex-item flex-item-1"> flex-item-1 </div>
    <div class="flex-item flex-item-2"> flex-item-2 </div>
    <div class="flex-item flex-item-3"> flex-item-3 </div>
    <div class="flex-item flex-item-4"> flex-item-4 </div>
    <div class="flex-item flex-item-5"> flex-item-5 </div>
</section>

.flex-item-3{
    flex-shrink: 0;
}

Please update your code accordingly.

As we gave flex-shrink:0 to the 3rd child it didn’t shrink down from its original size, rather all the other children shrink down to fit into parents.

flex-basis

flex-shrink define the length of the element. Values can be 200px, 20rem, 20%,etc or auto . Update your stylesheet accordingly.

.flex-item {
    /* width: 300px; */
    flex-basis: 400px;
}
.flex-item-3{
    flex-basis: 250px;
}

The output of the above code

flex

flexis the shorthand property of flex-grow,flex-shrink, andflex-basis.

order

By default, the flex-items are displayed in source order, but by using the order property we can change its display order in flex-container.

.flex-item-1 {
    order: 5;
}
.flex-item-2 {
    order: 4;
}
.flex-item-3 {
    order: 3;
}
.flex-item-4 {
    order: 2;
}
.flex-item-5 {
    order: 1;
}

The output of the above code

Few examples of flexbox

1. Demo 1
2. Demo 2