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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...