🎉
Windframe Form builder is finally here.
postImage

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 the explicit position of an element

The Flexible Box Layout Module makes it easier to design flexible, responsive layout structures without float or positioning. All browsers support CSS Flexbox property.

CSS Flexbox

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

HTML Code:

html
<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:

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

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

CSS Code:

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

The row value stacks the flex item horizontally.

CSS Code:

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

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

CSS Code:

css
.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:

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

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

CSS Code:

css
.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:

css
.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:

css
.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:

css
.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:

css
.flex-container {
display: flex;
justify-content: flex-start;
}

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

CSS Code:

css
.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:

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

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

CSS Code:

css
.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:

css
.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:

css
.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:

css
.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:

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

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

CSS Code:

css
.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:

css
.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:

css
.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:

css
.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:

css
.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:

css
.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:

css
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

Contrast Bootstrap UI Kit

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.Download the free react template

ad-banner

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

Related Posts

Comments

...