Web Design

CSS Flexbox explained

In this CSS tutorial we will learn about the CSS Flexbox model. This is a just quick overview, not an in-depth course. We will look at the basics such as

  • display: flex
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items

Video:

Introduction to CSS3 Flexbox

 What is The CSS Flexbox Layout Module?

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage.
  • Inline, for text.
  • Table, for two-dimensional table data.
  • Positioned, for explicit position of an element.

The Flexible Box Layout Module, makes it easier to design flexible and responsive layout structure without using float or positioning. 

The flexbox properties are supported in all modern browsers. Therefor Flexbox is currently a well established technology .

Code:

HTML

<h1>Flex Box</h1>
    <section id="Parent">
      <h2>Properties of the Parent flex Container</h2>
      <div class="flexbox-container">
        <div class="flexbox_item">Item-1</div>
        <div class="flexbox_item">Item-2</div>
        <div class="flexbox_item">Item-3</div>
        <div class="flexbox_item">Item-4</div>
        <div class="flexbox_item">Item-5</div>
        <div class="flexbox_item">Item-6</div>
      </div>
    </section>
    

CSS


/*General Settings*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* width: 100%; */

  list-style: none;
  text-decoration: none;
}

body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 16px;
  max-width: 950px;
  margin: auto;
  background-color: #ddd;
}

body h1 {
  text-align: center;
  font-size: 80px;
  font-weight: bolder;
  margin: 2rem 0;
  background-color: rgb(13, 57, 122);
  color: orange;
}

body h2 {
  margin: 1rem;
  text-align: center;
}

#Parent .flexbox-container {
  background-color: rgb(1, 120, 255);
  box-shadow: 0 0 10px 2px;
}

#Parent .flexbox-container .flexbox_item {
  font-size: 24px;
  margin: 1rem;
  padding: 1rem;
  background-color: rgb(0, 47, 255);
  color: #fff;
  border-radius: 5px;
  text-shadow: 1px 1px 1px rgb(51, 51, 51);
  box-shadow: 0 0 25px 2px rgba(255, 254, 254, 0.5);
}

Display Flex

Defines a flex container; inline or block depending on the given value.

CSS code:

#Parent .flexbox-container {

  display: flex;
}

Flex Direction

Defining the direction flex items are placed in the flex container.

Flex-direction row-reverse : right to left in ltr; left to right in rtl

CSS code:

#Parent .flexbox-container {
/*Flex-direction (row by default) */

   flex-direction: row-reverse;
}

Flex-direction column: same as row but top to bottom

CSS code:

#Parent .flexbox-container {


   flex-direction: column; 

}

Flex-direction column-reverse: same as row-reverse but bottom to top

CSS code:

#Parent .flexbox-container {

flex-direction: column-reverse; 

}

Flex Wrap 


 By default, flex items will all try to fit onto one line. 

 : nowrap (default): all flex items will be on one line

#Parent .flexbox-container {

flex-wrap: nowrap;

}


: wrap flex items will wrap onto multiple lines, from top to bottom. 

#Parent .flexbox-container {

flex-wrap: wrap;

}


 wrap-reverse: flex items will wrap onto multiple lines from bottom to top

#Parent .flexbox-container {



flex-wrap: wrap-reverse;

}

Justify Content

This defines the alignment along the main axis.

#Parent .flexbox-container {


  height: 300px;
  flex-wrap: wrap;

}

:(default) flex-start: items are packed toward the start of the flex-direction.

#Parent .flexbox-container {

justify-content: flex-start;

}

:  start: items are packed toward the start of the writing-mode direction.

#Parent .flexbox-container {

justify-content: start;

}

: flex-end : items are packed toward the end of the flex-direction.

#Parent .flexbox-container {

justify-content: flex-end;

}

: end: items are packed toward the end of the writing-mode direction

#Parent .flexbox-container {

justify-content: end;

}

: left: items are packed toward left edge of the container

#Parent .flexbox-container {

justify-content: left;

}

: right: items are packed toward right edge of the container

#Parent .flexbox-container {

justify-content: right;

}

: center: items are centered along the line

#Parent .flexbox-container {

justify-content: center;

}

: space-between: items are evenly distributed in the line

#Parent .flexbox-container {

justify-content: space-between;

}

: space-around: items are evenly distributed in the line with equal space around them.

#Parent .flexbox-container {

justify-content: space-around;

}

: space-evenly: items are distributed so that the spacing between any two items 

#Parent .flexbox-container {

justify-content: space-evenly;

}

Align-items

 This defines the default behavior for how flex items are laid out along the cross axis on the current line.

the (default) value of Align-items is stretch: stretch to fill the container

center: items are centered in the cross-axis

#Parent .flexbox-container {

align-items: center;

}

baseline: items are aligned such as their baselines align

#Parent .flexbox-container {

align-items: baseline;

}

flex-end: items are placed at the end of the cross axis.

#Parent .flexbox-container {

align-items: flex-end;

}

flex-start: items are placed at the start of the cross axis.

#Parent .flexbox-container {

align-items: flex-start;

}

stretch to fill the container

#Parent .flexbox-container {

align-items: stretch;

}

Learn more & become an expert in CSS Flexbox & CSS Grid!

Master Responsive Web Design CSS Grid, Flexbox & Animations

https://www.udemy.com/course/master-responsive-web-design-css-grind-flexbox-animations/?referralCode=C9376D9C317CA2A61693

Check out all of our courses on web development

Visual Studio Code – The Complete guide
Modern JavaScript and NodeJS from Beginner to AdvancedAdvanced CSS & SASS: Framework, FlexBox, Grid, Animations
Web Development HTML CSS & JS a 2020 Beginner to AdvanceMaster Responsive Web Design CSS Grid, Flexbox & Animations
Web Development Courses

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: