New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉
postImage

Tutorial: CSS Flexbox

blogImage

By Emmanuel Chinonso

Web Developer

CSS Flexbox

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

Contrast Bootstrap UI Kit

  • 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.

CSS Flexbox

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>

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.

CSS Flexbox

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

CSS Code:

.flex-container {
display: flex;
flex-direction: column;
}

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

CSS Code:

.flex-container {
display: flex;
flex-direction: column-reverse;
}

The row value stacks the flex item horizontally.

CSS Code:

.flex-container {
display: flex;
flex-direction: row;
}

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

CSS Code:

.flex-container {
display: flex;
flex-direction: row-reverse;
}

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;
}

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

CSS Code:

.flex-container {
display: flex;
flex-wrap: nowrap;
}

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;
}

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;
}

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;
}

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;
}

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

CSS Code:

.flex-container {
display: flex;
justify-content: flex-end;
}

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;
}

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

CSS Code:

.flex-container {
display: flex;
justify-content: space-between;
}

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;
}

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;
}

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;
}

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;
}

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

CSS Code:

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro

ad-banner

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro

Share Post:

Comments

...