CSS - 06 - Flexbox

Flexbox Resource

Flexbox is a layout model in CSS designed to arrange items into rows or columns. It allows items to flex (grow or shrink) based on defined rules, giving us more control over the alignment, spacing, and distribution of elements in a container.

Flex Containers and Flex Items

Flexbox involves two main concepts:

• Flex Container: This is the parent element that has display: flex applied to it. It acts as a wrapper for the child elements.
• Flex Items: These are the child elements inside the flex container, which will be arranged based on the flex properties of the container.

Any element can be both a flex container and a flex item. flex containers can be nested, applying display: flex to a flex item and then arranging its children using flexbox again (i.e., creating nested flexboxes).

Centering Buttons with Flexbox

<div class="button-container">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

.button-container {
  display: flex;  /* Establish flexbox on the container */
  justify-content: center;  /* Align the buttons horizontally in the center */
}

button {
  margin: 0 10px;  /* Optional: Space between buttons */
}

Explanation:

• Flex Container: The <div class="button-container"> is the flex container with display: flex.
• Flex Items: The two <button> elements are the flex items inside the container.
• justify-content: center is used to center the buttons horizontally.
• You can use margin on the buttons to add space between them, or use justify-content: space-around or justify-content: space-between to control spacing automatically.

Common Flexbox Properties

1. Flex Container Properties

The flex container controls the layout of its direct child elements (flex items).

display: flex: Establishes the flex container.

flex-direction: Defines the direction in which the flex items are placed (row, column, etc.).

• row (default): Items are placed horizontally (left to right).
• column: Items are placed vertically (top to bottom).

justify-content: Aligns the flex items along the main axis (horizontal or vertical depending on flex-direction).

• center: Centers items within the container.
• flex-start: Aligns items to the start of the container.
• flex-end: Aligns items to the end of the container.
• space-between: Distributes items evenly with space between them.
• space-around: Distributes items with equal space around them.
• space-evenly: Distributes items with equal space between and around them.

.container {
  display: flex;
  justify-content: space-between; /* Space out items evenly */
}

align-items: Aligns the items along the cross axis (perpendicular to the main axis).

• stretch (default): Stretches items to fill the container’s height.
• flex-start: Aligns items to the top (or left if flex-direction: row).
• flex-end: Aligns items to the bottom (or right if flex-direction: row).
• center: Centers items vertically (or horizontally).
• baseline: Aligns items based on their baseline (useful for text).

.container {
  display: flex;
  align-items: center;  /* Vertically centers items in the container */
}

align-content: Aligns the flex lines when there is extra space along the cross axis (for multi-line flex containers).

• flex-start, flex-end, center, space-between, space-around, and stretch work similarly as with align-items.

2. Flex Item Properties

These properties control the layout and behavior of individual flex items inside a flex container.

flex-grow: Defines how much a flex item should grow relative to the other items in the container. It is a proportion.

• flex-grow: 1; means the item can grow to take up any available space.
• A value of 0 means it will not grow.

.item {
  flex-grow: 1;  /* Allow this item to grow */
}

flex-shrink: Defines how much a flex item should shrink relative to the other items when there is not enough space.

• flex-shrink: 1; (default) allows the item to shrink if needed.
• flex-shrink: 0; means the item will not shrink.

.item {
  flex-shrink: 0;  /* Prevent this item from shrinking */
}

flex-basis: Specifies the initial size of the flex item before any space distribution.

• This can be a fixed value (e.g., 200px) or auto (where the size is based on the item’s content).

.item {
  flex-basis: 100px;  /* Set initial size to 100px */
}

flex: This is a shorthand property for flex-grow, flex-shrink, and flex-basis.

• flex: 1 is a common shorthand, which means the item can grow and shrink, and the initial size is 0.

.item {
  flex: 1;  /* Equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

align-self: Overrides the align-items setting for an individual flex item.

• align-self: center; will center the item vertically (or horizontally depending on the flex-direction).

.item {
  align-self: flex-end;  /* Align this item to the end along the cross axis */
}

Columns in Flexbox

By default, Flexbox arranges items in a row. However, you can also create a column layout by using flex-direction: column;.

Creating Columns in Flexbox

When you use display: flex, it places all direct children of the container into rows or columns. However, only direct children are arranged this way. Any nested elements inside those direct children will not automatically be arranged into columns.

Creating a Column Layout

.container {
  display: flex;
  flex-direction: column;  /* Arrange items in a column */
  align-items: center;  /* Optionally, center the items horizontally */
}

Important Notes:

• Flexbox uses the container’s direct children for the layout.
• If a container has nested elements, those elements will not be arranged in a column unless you apply display: flex to the nested container as well.
• To make the layout responsive, the flex container width should be set appropriately, especially in responsive designs.

Summary of Key Flexbox Properties

• Interneting Is Hard tutorial on CSS layouts with flexbox.
• Slaying the dragon tutorial on Flexbox in 8 minutes.