Introduction to Layouts with Flexbox

Flexbox (Flexible Box Module) is a one-dimensional layout method for arranging items in a container, allowing them to expand or shrink to fill the available space. It's ideal for distributing space among items and aligning them within a layout.

The Flexbox Concept

.flex-container {
  display: flex;
}
<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
→
Flexbox works on two main components:
- Flex Container: The parent element where display: flex (or inline-flex) is applied.
- Flex Items: The direct children of the flex container.

Flexbox is designed for one-dimensional layouts (either a row OR a column), whereas CSS Grid is for two-dimensional (rows AND columns).

Container Property: `display`

.my-div {
  display: flex;
}
→
This property transforms an element into a flex container, making its direct children into flex items.

The most crucial property to start with. Apply display: flex; to the parent element of the items you want to arrange.

Container Property: `flex-direction`

.container {
  display: flex;
  flex-direction: row; /* Default */
  /* Alternatives: column, row-reverse, column-reverse */
}
→
Determines the main axis along which flex items are placed.
  • row (default): Horizontal, left to right
  • column: Vertical, top to bottom
  • row-reverse: Horizontal, right to left
  • column-reverse: Vertical, bottom to top

Sets the direction of the main axis, which defines the direction flex items are placed in the flex container.

Container Property: `justify-content`

.container {
  justify-content: center;
  /* Others: flex-start, flex-end, space-between, space-around, space-evenly */
}
→
Aligns flex items along the main axis (horizontally for row, vertically for column).
  • flex-start: Items packed to the start of the main axis.
  • center: Items centered along the main axis.
  • space-between: Items distributed with space between them.
  • space-around: Items distributed with space around them.

Distributes space between and around content items along the main axis of the flex container.

Container Property: `align-items`

.container {
  align-items: center;
  /* Others: flex-start, flex-end, stretch, baseline */
}
→
Aligns flex items along the cross axis (vertically for row, horizontally for column).
  • flex-start: Items packed to the start of the cross axis.
  • center: Items centered along the cross axis.
  • stretch: Items stretch to fill the container (default).

Aligns flex items along the cross axis (perpendicular to the main axis).

Container Properties: `gap` and `flex-wrap`

.container {
  gap: 10px; /* Space between items */
  flex-wrap: wrap; /* Allows items to wrap to next line */
}
→
- gap provides spacing between flex items without affecting outer margins.
- flex-wrap controls whether flex items are forced onto a single line or can wrap onto multiple lines. (e.g., wrap, nowrap (default)).

gap is a newer way to add spacing; flex-wrap is essential for responsive layouts when items might overflow.

Item Properties: `flex-grow`, `flex-shrink`, `flex-basis`

.item-one {
  flex-grow: 1; /* Allows item to grow */
  flex-shrink: 0; /* Prevents item from shrinking */
  flex-basis: 100px; /* Initial size */
  /* Shorthand: flex: 1 0 100px; */
}
→
- flex-grow (≥ 0): Defines an item's ability to grow if there's available space.
- flex-shrink (≥ 0): Defines an item's ability to shrink if there's not enough space.
- flex-basis: Sets the initial size of a flex item before any available space is distributed.

These properties control how individual flex items behave in response to available space.

Item Properties: `order` and `align-self`

.item-special {
  order: -1; /* Item appears first */
  align-self: flex-end; /* Overrides container align-items */
}
→
- order: Controls the visual order of flex items, regardless of their source order.
- align-self: Overrides the container's align-items for a single flex item.

order can change the visual flow, while align-self offers individual alignment control.

Common Flexbox Mistakes

/* Forgetting display: flex on container */
.container { flex-direction: row; /* Does nothing without display: flex */ }

/* Applying flex properties to non-items */
.some-element { flex-grow: 1; /* Only works on flex items */ }

/* Confusing main and cross axis */
/* justify-content (main), align-items (cross) */

Always ensure display: flex is set on the parent, and remember which properties apply to the container versus the items.

Practical Use: Responsive Navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #444;
  padding: 10px 20px;
}

.nav-links {
  display: flex;
  gap: 15px;
}

.logo {
  color: white;
  font-size: 1.5em;
}
→
A flexible navigation bar where:
- Logo is on one end, links on the other (space-between).
- Items are vertically centered (align-items: center).
- Links have consistent spacing (gap).

Your Task: Building with Flexbox

Apply Flexbox properties to the provided HTML structure:

  1. For .container-one:
    • Make it a flex container.
    • Arrange items in a column.
    • Center items along the main axis (justify-content).
    • Center items along the cross axis (align-items).
  2. For .container-two:
    • Make it a flex container.
    • Add a gap of 15px between items.
    • Set flex-direction to row.
  3. For the items within .container-two:
    • Give .item-a a flex-grow of 1.
    • Give .item-b a flex-grow of 2.
    • Give .item-c an align-self of flex-start to override any container alignment.
  4. For .container-three:
    • Make it a flex container.
    • Allow items to wrap to the next line if space is insufficient.
    • Distribute space evenly between and around items using justify-content: space-around;.

Challenge: Experiment with different values for justify-content and align-items to see their effects!

Section 1/11The Flexbox Concept

The Flexbox Concept

Flexbox is designed for one-dimensional layouts (either a row OR a column), whereas CSS Grid is for two-dimensional (rows AND columns).

Introduction to Layouts with Flexbox

Flexbox (Flexible Box Module) is a one-dimensional layout method for arranging items in a container, allowing them to expand or shrink to fill the available space. It's ideal for distributing space among items and aligning them within a layout.

The Flexbox Concept

.flex-container {
  display: flex;
}
<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
→
Flexbox works on two main components:
- Flex Container: The parent element where display: flex (or inline-flex) is applied.
- Flex Items: The direct children of the flex container.

Flexbox is designed for one-dimensional layouts (either a row OR a column), whereas CSS Grid is for two-dimensional (rows AND columns).

Preview