DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Flexbox

CSS Flexbox

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 responsive layout structure without using float or positioning. All browsers support CSS Flexbox property.

Flex

To start using the Flexbox model, you need to first define a flex container. The image above represents a Flexbox container

HTML Code:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

The flex container properties are:

  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • Justify-content
  • Align-items
  • Align-content

The Flex-Direction Property:

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

Flex

The column value stacks the flex items vertically (from top to bottom):

CSS Code:

.flex-container {
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

The column-reverse value stacks the flex items vertically (but from bottom to top):

CSS Code:

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

The row value stacks the flex item horizontally.

CSS Code:

.flex-container {
  display: flex;
  flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

The row-reverse value stacks the flex items horizontally (but from right to left)

CSS Code:

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

The flex-wrap Property: The flex-wrap property specifies whether the flex items should wrap or not. XxThe wrap value specifies that the flex items will wrap if necessary:

CSS Code:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

The nowrap value specifies that the flex items will not wrap (this is default):

CSS Code:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

CSS Code:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

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

CSS Code:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

The justify-content Property: The justify-content property is used to align the flex items. The center value aligns the flex items at the center of the container:

CSS Code:

.flex-container {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

The flex-start value aligns the flex items at the beginning of the container (this is default):

CSS Code:

.flex-container {
  display: flex;
  justify-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

The flex-end value aligns the flex items at the end of the container:

CSS Code:

.flex-container {
  display: flex;
  justify-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

The space-around value displays the flex items with space before, between, and after the lines:

CSS Code:

.flex-container {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

The space-between value displays the flex items with space between the lines:

CSS Code:

.flex-container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

The align-items Property: The align-items property is used to align the flex items. The center value aligns the flex items in the middle of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

The flex-start value aligns the flex items at the top of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

The flex-end value aligns the flex items at the bottom of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

The stretch value stretches the flex items to fill the container (this is default):

CSS Code:

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

The baseline value aligns the flex items such as their baselines aligns:

CSS Code:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}
Enter fullscreen mode Exit fullscreen mode

The align-content Property: The align-content property is used to align the flex lines. The space-between value displays the flex lines with equal space between them:

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

The space-around value displays the flex lines with space before, between, and after them

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

The stretch value stretches the flex lines to take up the remaining space (this is default):

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}
Enter fullscreen mode Exit fullscreen mode

The center value displays display the flex lines in the middle of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

The flex-start value displays the flex lines at the start of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

The flex-end value displays the flex lines at the end of the container:

CSS Code:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Oldest comments (0)

Read next

onixcloud profile image

AI in Healthcare: Affordability, Implementation Costs, and the Power of Google Cloud AI

Onix Cloud -

manasmoon_ profile image

5 Uncommon Advices from one beginner coder to another beginner coder!

Manas Moon -

niladridas profile image

Root Mean Squared Error (RMSE) 💻

Niladri Das -

ng_news profile image

Episode 24/16: New Template Compiler, Zoneless in Angular 18

ng-news -