CSS

CSS Flexbox Layout

CSS Flexible Box Layout, commonly known as Flexbox is a one-dimensional layout model that has flexible and efficient layouts for arranging items either in rows or columns. Flex-box is contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together. Items flex is used to fill additional space or shrink to fit into smaller spaces. Flex layout makes it easier to build responsive web pages without using many float and position properties in the CSS code.

There are two axes of Flexbox:

the main axis: The main axis is defined by the flex-direction property. By default, the main axis runs from left to right. The start and end of the main axis are called the main start and main end.

the cross axis: The cross axis runs perpendicular to the main axis. The start and end of this axis are called the cross start and cross end.

Flexbox properties

Flexbox properties for Parent or Flex Container

  • display

A flex container is the parent element that holds all flex items. CSS display property defines the container to be either flex or inline-flex. If the display value of the flex container is flex means it acts like a block-level element in terms of how it interacts with the rest of the page, but its children are laid out as flex items. If a display value flex container is inline-flex it acts like an inline element and its children are laid out as flex items.

.flex-container {
    display: flex; /* or inline-flex */
}
  • flex-direction

The direction of flex items is defined using flex-direction property in the flex container and flex-direction property allows to change the direction in which flex items are displayed. If we set the flex-direction: row, the items are displayed in the row from the start lines and if we set the flex-direction: row-reverse, the items are displayed along the row from the end lines.

If flex-direction is set to column, the main axis switches, and items are displayed in a column, from the top of the page to the bottom — in the block direction. Setting column-reverse switches the start and end lines.

 .flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

  • flex-wrap

By default, flex items try to fit onto one line. This can be changed and items can be wrapped as needed with this property.

    • nowrap (default): all flex items are in one line
    • wrap: flex items are wrapped onto multiple lines, from top to bottom.
    • wrap-reverse: flex items are wrapped onto multiple lines from bottom to top.
.flex-container {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

  • flex-flow

This is a shortcut for the flex-direction and flex-wrap properties. flex-flow property together defines the flex container’s main and cross axes. The default value is row nowrap.

.flex-container {
  flex-flow: column wrap;
}
  • justify-content

The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which lines the items up at the start edge of the container, but the value can be set to flex-end to line the items up at the end, or center to line the items up in the center.

The space-between value can be taken to take all the spare space after the items have been laid out, and share it out evenly between the items so that there will be an equal amount of space between each item. To have an equal amount of space on the right and left of each item value space-around can be used. Since all the items have equal space on both sides using space-around, visually the spaces aren’t equal. To have equal space around the items space-evenly can be used. With space-evenly, items have a full-size space on either end.

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ;
}

  • align-items

The align-items property aligns the items on the cross axis. The initial value for the align-items property is stretch and the flex items are stretched to the height of the flex container by default. This is dictated either by the height of the tallest item in the container or by the size of the flex container itself.

In order to make the items line up at the start of the flex container, set align-items to flex-start and set align-items to flex-end to align items to the end, or center to align the items in the center.

.flex-container {
  align-items: stretch | flex-start | flex-end | center;
}

  • align-content

The align-content property on the flexbox container is used to align items together on the cross axis. To use this property, set flex-wrap: wrap or flex-wrap: wrap-reverse.

Note: This property has no effect on single-line flexible containers,  where flex-wrap is set to its default value, no-wrap i.e. flex-wrap: no-wrap.

.flex-container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
    • normal (default): Items are packed in their default position as if no value was set.
    • flex-start / start: Items packed to the start of the container.
    • flex-end / end: items packed to the end of the container.
    • center: Items are paced around the center of the container.
    • space-between: Items are evenly distributed; the first line is at the start of the container while the last one is at the end.
    • space-around: Items are evenly distributed with equal space around each line.
    • space-evenly: items are evenly distributed with equal space around them.
    • stretch: Items are distributed evenly. Auto-sized items are stretched to fit the container.

  • gap, row-gap, column-gap

The gap property controls the space between flex items. Spacing is applied only between items not on the outer edges.

.flex-container {
  display: flex;
  gap: 10px;
  gap: 10px 10px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 10px;
}

Flexbox properties for the Children (flex items)

  • order

By default, flex items are displayed in the source order. However, the order property can control the order in which the items appear in the flex container.

<div class="flex-container"> 
  <div style="order: 3"> Item 1</div>
  <div style="order: 2">Item 2</div>
  <div style="order: 4">Item 3</div> 
  <div style="order: 1">Item 4</div>
</div>

 

  • flex-grow

The flex-grow property specifies how much a flex item should grow relative to the rest of the flex items. If all items have flex-grow set to 1, the remaining space in the container is distributed equally to all children. If one of the children has a value of 2, that child takes up twice as much of the space as either one of the others.

<div class="flex-container">
  <div style="flex-grow: 1"> Item 1</div>
  <div style="flex-grow: 1">Item 2</div>
  <div style="flex-grow: 4">Item 3</div> 
</div>

  • flex-shrink

The flex-shrink property specifies the ability for a flex item to shrink relative to the rest of the flex items.

    <div>Item 1</div>
    <div>Item 2</div>
    <div style="flex-shrink: 0">Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

  • flex-basis

The flex-basis property specifies the initial length of a flex item.

.item {
flex-basis: | auto; /* default auto */
}
  • flex

The flex is a shorthand for flex-grow, flex-shrink, and flex-basis properties. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but it is set with a single number value, it’s like 1 0.

  • align-self

The align-self property specifies the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container’s align-items property.

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div style="align-self: center">Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

Views: 101

Standard