css flex

by | Sep 8, 2024 | Technology

The CSS Flexbox (Flexible Box) layout is a powerful tool for creating flexible and responsive layouts. It simplifies the alignment of elements in one-dimensional layouts, either in a row or column, distributing space dynamically between items.

1. Basic Flexbox Concepts:

  • Flex Container: The parent element that contains flex items.
  • Flex Items: The child elements inside the flex container.

2. Basic Flexbox Syntax:

To use Flexbox, you need to define the parent (container) as a flex container with display: flex.

css

.flex-container {
display: flex;
}

3. Flexbox Properties:

Flex Container Properties:

  • flex-direction: Defines the direction of the flex items (row or column).
    • row: Items are placed horizontally (default).
    • column: Items are placed vertically.
    • row-reverse: Items are placed horizontally in reverse order.
    • column-reverse: Items are placed vertically in reverse order.

Example:

css

.flex-container {
display: flex;
flex-direction: row; /* Can be row, column, row-reverse, or column-reverse */
}
  • justify-content: Aligns flex items horizontally along the main axis.
    • flex-start: Items align to the left (default).
    • flex-end: Items align to the right.
    • center: Items are centered.
    • space-between: Items are spaced out evenly, with the first item at the start and the last at the end.
    • space-around: Items are spaced out evenly with equal space around them.

Example:

css

.flex-container {
display: flex;
justify-content: space-between; /* Aligns items with space between */
}
  • align-items: Aligns flex items vertically along the cross axis.
    • stretch: Items stretch to fill the container (default).
    • flex-start: Items align to the top.
    • flex-end: Items align to the bottom.
    • center: Items are centered vertically.
    • baseline: Items align based on their baseline (text line).

Example:

css

.flex-container {
display: flex;
align-items: center; /* Vertically aligns items to the center */
}
  • flex-wrap: Determines if items should wrap when they exceed the container’s width.
    • nowrap: All items stay on a single line (default).
    • wrap: Items wrap onto multiple lines if needed.
    • wrap-reverse: Items wrap onto multiple lines, but in reverse order.

Example:

css

.flex-container {
display: flex;
flex-wrap: wrap; /* Items will wrap onto multiple lines */
}

Flex Item Properties:

  • flex-grow: Specifies how much an item will grow relative to the other items in the flex container.

Example:

css

.flex-item {
flex-grow: 2; /* This item will grow twice as much as other items */
}
  • flex-shrink: Specifies how much an item will shrink relative to the other items.

Example:

css

.flex-item {
flex-shrink: 1; /* This item will shrink if necessary */
}
  • flex-basis: Defines the initial size of a flex item before it is adjusted by flex-grow or flex-shrink.

Example:

css

.flex-item {
flex-basis: 200px; /* This item will be 200px wide initially */
}
  • align-self: Overrides the align-items property for individual flex items.
    • auto: Inherits from the align-items of the container.
    • flex-start: Aligns the item at the start.
    • flex-end: Aligns the item at the end.
    • center: Centers the item.
    • stretch: Stretches the item.

Example:

css

.flex-item {
align-self: flex-end; /* This specific item will align to the bottom */
}

4. Basic Flexbox Example:

HTML:

html

<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>

CSS:

css

.flex-container {
display: flex;
justify-content: space-around; /* Distribute items evenly with space around them */
align-items: center; /* Center items vertically */
height: 200px; /* Set a height for the flex container */
}

.flex-item {
background-color: lightblue;
padding: 20px;
border: 1px solid #ccc;
}

This creates a simple flexbox layout where the items are spaced evenly with equal space around each one and vertically centered within a 200px-tall container.

5. Responsive Design with Flexbox:

Flexbox is perfect for creating responsive designs because it adjusts the layout dynamically.

Example of a Responsive Flexbox Layout:

css

.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.flex-item {
flex-basis: 30%; /* Items take up 30% of the container’s width */
margin: 10px;
}

@media (max-width: 600px) {
.flex-item {
flex-basis: 100%; /* On smaller screens, items take up the full width */
}
}

In this example, the items will display in three columns on larger screens but will stack on top of each other on screens smaller than 600px.

6. Aligning Flexbox Content in a Column Layout:

Flexbox also works well for vertical (column) layouts. By setting the flex-direction to column, you can easily align items vertically.

Example:

css

.flex-container {
display: flex;
flex-direction: column; /* Items stack vertically */
justify-content: center; /* Centers items vertically */
height: 300px; /* Set height for container */
}

This will center the flex items vertically in a 300px-high container.

7. Complete Flexbox Layout Example:

HTML:

html

<div class="flex-container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>

CSS:

css

.flex-container {
display: flex;
flex-direction: column; /* Stack items vertically */
height: 100vh; /* Take up full height of the viewport */
}

.header, .footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

.menu, .main, .sidebar {
display: flex;
justify-content: space-around;
padding: 20px;
}

.main {
flex-grow: 2; /* Main content takes up more space */
background-color: lightblue;
}

.menu, .sidebar {
flex-grow: 1;
background-color: lightgray;
}

In this example:

  • The layout stacks items vertically.
  • The main content area grows to take up more space, while the sidebar and menu take up less space.
×
Sign in
Sign up

Sign In

Sign Up