Flexbox CSS Layout

Hits: 1629

Before flexbox CSS layout module, there were following layout modules are available:

  • Block
  • Inline and inline-block
  • Positioning of div using position

The flexbox layout module target to providing a more efficient way to manage layout, and make it more easier to design structure without having to float and positioning, The container having unknown or/and dynamic width, it will distribute space among the items in the container.

Flexbox Elements

A flexbox having main container with flexbox CSS and with a one or more element as a child elements

Flexbox properties for the parent elements

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Flex container with child div's inside flex-wrapper i.e.

HTML
<div class="flex-wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

We need to add property for parent div

CSS
.flex-wrapper {
  display: flex;
}

Direction properties for the parent elements

  1. Flex-direction

Flex-direction property defines in which direction the container (.flex-wrapper) want to flow child items

Properties for flex-direction:
- flex-direction: column;
- flex-direction: column-reverse;
- flex-direction: row;
- flex-direction: row-reverse;

flex-direction: column;

The column value fix the child items vertically

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

The column value fix the child items vertically but from bottom to top

.flex-wrapper {
  display: flex;
  flex-direction: column-reverse;
}
flex direction column reverse
flex-direction: row

The row value fix the child items horizontally from left to right

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

The row value fix the child items horizontally from right to left

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

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries