Comparison of Traditional and Flexbox Layouts

Traditional Layout

• Offers broad browser compatibility but requires complex code.
• Limited adaptability for mobile device layouts.
• Inflexible handling of responsive designs on mobile platforms.

Flexbox Layout

• Simplifies layout creation with intuitive properties, widely used in mobile development.
• Limited support in older versions of Internet Explorer (IE11 and below).

Recommendations:

1. Use traditional layout techniques for desktop-only websites.
2. Employ flexbox for mobile-first or non-compatibility constrained projects.

Principles of Flexbox

Core Concept

Flexbox stands for Flexible Box, designed to provide flexibility in box model layouts. Any container can be transformed into a flex container by applying the display: flex property.

Key behaviors:

• Applying flex to a parent element negates the effects of float, clear, and vertical-align on its children.
• Flexbox is also known as flexible box, flex container, flex item, and so forth.

In a flex context:

• The parent container is referred to as the flex container.
• Its children are termed flex items.

Example:

<div class="container">
  <span class="item">Item 1</span>
  <span class="item">Item 2</span>
</div>

In this case, div acts as the flex container, and span elements are flex items that can be arranged horizontally or vertically.

Summary: By applying the flex property to a parent container, you control how its child elements are positioned and aligned.

Parent Container Properties

Main Properties

Six key properties apply to the flex container:

• flex-direction: Defines the primary axis direction.
• justify-content: Aligns items along the primary axis.
• flex-wrap: Determines if items should wrap to new lines.
• align-content: Aligns lines when multiple rows exist.
• align-items: Aligns items along the cross axis (single line).
• flex-flow: Shorthand combining flex-direction and flex-wrap.

flex-direction: Primary Axis Direction

Axes Overview

Flexbox defines two axes:

• Primary axis: Default is horizontal (left to right).
• Cross axis: Default is vertical (top to bottom).

Values

Value	Description
row	Left to right (default)
row-reverse	Right to left
column	Top to bottom
column-reverse	Bottom to top

justify-content: Alignment Along Primary Axis

Controls alignment of items along the primary axis.

Value	Description
flex-start	Starts from the beginning
flex-end	Ends at the end
center	Centered horizontally
space-around	Even spacing around items
space-between	Items spread with first and last at edges

flex-wrap: Line Wrapping

Determines whether items wrap to new lines.

Value	Description
nowrap	Default, no wrapping
wrap	Allow wrapping

align-items: Alignment Along Cross Axis (Single Line)

Defines alignment along the cross axis for single-line containers.

Value	Description
flex-start	Aligns to top
flex-end	Aligns to bottom
center	Vertically centered
stretch	Stretches to fill space

align-content: Alignment of Lines (Multi-line)

Controls alignment of multiple lines when flex-wrap is set to wrap. Only effective when there are multiple lines.

Value	Description
flex-start	Lines start at top
flex-end	Lines end at bottom
center	Lines centered
space-around	Space evenly around lines
space-between	Lines spread with extremes at edges
stretch	Lines stretch to fill space

Difference Between align-content and align-items

• align-items applies to single-line layouts.
• align-content applies to multi-line layouts.

flex-flow: Combined Property

A shorthand for setting both flex-direction and flex-wrap.

.container {
  flex-flow: row wrap;
}

Child Item Properties

Key Properties

• flex: Controls how much space an item takes up.
• align-self: Overrides align-items for individual items.
• order: Sets the order of items.

flex: Distributing Remaining Space

Controls how much space an item occupies relative to others.

.item {
  flex: 1; /* Takes one part of available space */
}

align-self: Individual Cross-Axis Alignment

Allows overriding of align-items for specific items.

.item:nth-child(2) {
  align-self: flex-end;
}

order: Item Ordering

Defines the sequence of items. Lower values appear earlier.

.item {
  order: -1; /* Appears before others */
}