Layout Techniques

Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).

It is designed to distribute space along a single axis and includes the following key components:

• Flex Container: The parent element that holds the flex items and defines the context for the flex layout. It is created by setting the display property to flex or inline-flex.
• Flex Items: The direct children of the flex container. These items can be controlled by various flex properties.

.container{
		display:flex;
}

• Flex Properties:

  1. Flex-direction

  Flex-direction property is used to give direction to element should be placed, four types of properties are defined.

  • flex-direction: row; place flex-items in row (horizontal).
  • flex-direction: row-reverse; place flex-items in row but in reverse order.
  • flex-direction: column; place flex-items in column (vertical).
  • flex-direction: column-reverse; place flex-items in column but in reverse order.

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

2. Flex-wrap

Flex-wrap property is used for wrapping flex-items inside the flex-container.

• flex-wrap : nowrap will not wrap flex-item in flex-container.
• flex-wrap : wrap will wrap flex-item in flex-container if it not fit in container size.

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

3. Flex-flow

This is a shorthand for the flex-direction and flex-wrap  properties, which together define the flex container’s main and cross axes. The default value is row nowrap.