Flex Container

The Flexbox layout model, or simply "Flexbox," provides an efficient way to distribute and align items in complex layouts and when the sizes of your items are unknown or dynamic.

In Flexbox, you have a flex container (the parent element) and flex items (the children). The main idea is to give the container the ability to alter its items' width/height and order to best fill the available space.

Defining a Flex Container

To define a flex container, you use the display property with the value flex or inline-flex (if you want the container to behave like an inline element).

.container {
  display: flex;
}

Main Axis and Cross Axis

In CSS Flexbox, the terms "main axis" and "cross axis" are crucial for understanding how to control layout and alignment. These axes are not fixed; they change depending on the flex-direction property.

Main Axis

The main axis is the primary axis along which flex items are laid out. It is determined by the flex-direction property, which can have one of the following values:

• row (default): The main axis runs horizontally from left to right.
• row-reverse: The main axis runs horizontally from right to left.
• column: The main axis runs vertically from top to bottom.
• column-reverse: The main axis runs vertically from bottom to top.

Properties like justify-content and flex-grow, flex-shrink, and flex-basis operate along the main axis.

Cross Axis

The cross axis is perpendicular to the main axis. For example, if the main axis is horizontal (row or row-reverse), the cross axis will be vertical. Conversely, if the main axis is vertical (column or column-reverse), the cross axis will be horizontal.

Properties like align-items, align-self, and align-content operate along the cross axis.

Main Axis and Cross Axis Examples

Here are some examples to illustrate:

Main Axis: Row

.flex-container {
  display: flex;
  flex-direction: row; /* main axis is horizontal */
  justify-content: center; /* center items along the main axis */
}

Main Axis: Column

.flex-container {
  display: flex;
  flex-direction: column; /* main axis is vertical */
  justify-content: center; /* center items along the main axis */
}

Cross Axis: Align Items

.flex-container {
  display: flex;
  align-items: center; /* center items along the cross axis */
}

Main Axis and Cross Axis Best Practices

1. Responsive Design: Use the main and cross axes in conjunction with media queries to create layouts that adapt to different screen sizes.

2. Semantic Meaning: Choose the main axis based on the natural flow of content. For example, use row for a set of buttons and column for a stack of cards.

3. Readability: When using Flexbox, it's helpful to comment or document the chosen main and cross axes, especially if the layout is complex.

4. Browser Compatibility: Flexbox is well-supported in modern browsers, but always check compatibility if you need to support older versions.

flex-flow

The flex-flow property in CSS is a shorthand for setting both the flex-direction and flex-wrap properties, which define the main axis direction and the wrapping behavior of flex items within a flex container.

Here are some examples to illustrate how flex-flow works:

flex-flow - example 1: Row with No Wrapping (Default)

.container {
  display: flex;
  flex-flow: row nowrap;
}

flex-flow - example 2: Column with Wrapping

.container {
  display: flex;
  flex-flow: column wrap;
}

flex-flow - example 3: Row Reversed with Wrapping

.container {
  display: flex;
  flex-flow: row-reverse wrap;
}

Controls whether items should wrap onto multiple lines or not.

.container {
  flex-wrap: nowrap; /* default */
  /* or */
  flex-wrap: wrap;
}

flex-direction

The flex-direction property in CSS defines the main axis direction within a flex container. It determines how flex items are placed in the flex container, essentially controlling the direction in which they are stacked or aligned.

Syntax

The flex-direction property can take one of the following values:

• row: This is the default value. Flex items are laid out from left to right in the container, in the same direction as the text.

• row-reverse: Flex items are laid out from right to left, opposite to the text direction.

• column: Flex items are laid out from top to bottom, vertically.

• column-reverse: Flex items are laid out from bottom to top, vertically but in the reverse direction.

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

Here are some examples to illustrate how flex-direction works:

flex-direction - example 1: Row (Default)

.container {
  display: flex;
  flex-direction: row;
}

In this example, flex items will be aligned from left to right, in a single row.

flex-direction - example 2: Column

.container {
  display: flex;
  flex-direction: column;
}

Here, flex items will be aligned from top to bottom, in a single column.

flex-direction - example 3: Row Reverse

.container {
  display: flex;
  flex-direction: row-reverse;
}

In this case, flex items will be aligned from right to left, in a single row but in the reverse direction.

flex-wrap

The flex-wrap property in CSS controls whether the flex items within a flex container are forced into a single line or can wrap onto multiple lines. This property is particularly useful for managing the layout behavior when there is not enough space to fit all items on a single line.

Syntax

The flex-wrap property can take one of the following values:

• nowrap: This is the default value. Flex items are laid out in a single line, which may cause the container to overflow.

• wrap: Flex items wrap onto multiple lines, from top to bottom.

• wrap-reverse: Flex items wrap onto multiple lines, but the cross-start and cross-end directions are switched.

/* Syntax */
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Here are some examples to illustrate how flex-wrap works:

flex-wrap - example 1: No Wrap (Default)

.container {
  display: flex;
  flex-wrap: nowrap;
}

In this example, all flex items will be aligned in a single row, even if this causes the container to overflow.

flex-wrap - example 2: Wrap

.container {
  display: flex;
  flex-wrap: wrap;
}

Here, flex items will wrap onto multiple lines if there's not enough space to fit them on a single line.

flex-wrap - example 3: Wrap Reverse

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

In this case, flex items will wrap onto multiple lines like in the wrap example, but the direction will be reversed.

justify-content

The justify-content property in CSS is used within a flex container to align its children (flex items) along the main axis. The main axis is determined by the flex-direction property.

Syntax

The justify-content property can take one of the following values:

• flex-start: Aligns items at the beginning of the container. This is the default value.
• flex-end: Aligns items at the end of the container.
• center: Aligns items at the center of the container.
• space-between: Distributes items evenly, with the first item at the start and the last item at the end.
• space-around: Distributes items evenly, with equal space around each item.
• space-evenly: Distributes items evenly, with equal space between each pair of adjacent items.

/* Syntax */
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

justify-content Examples

Here are some examples to illustrate how justify-content works:

Example 1: Flex Start (Default)

.container {
  display: flex;
  justify-content: flex-start;
}

In this example, all flex items will be aligned at the beginning of the container.

Example 2: Center

.container {
  display: flex;
  justify-content: center;
}

Here, all flex items will be centered along the main axis of the container.

Example 3: Space Between

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

In this case, flex items will be evenly distributed along the main axis, with the first item at the start and the last item at the end.

justify-content Best Practices

1. Responsive Design: Use justify-content in conjunction with media queries to adapt layouts to different screen sizes.

2. Nested Flex Containers: You can use nested flex containers with different justify-content settings to create complex layouts.

3. Readability: When using justify-content, it's helpful to comment or document why a particular alignment is chosen, especially if it deviates from the default flex-start.

4. Browser Compatibility: The justify-content property is well-supported in modern browsers, but always check compatibility if you need to support older versions.

Understanding the justify-content property allows you to control the alignment of flex items along the main axis, offering a high degree of flexibility for complex layouts.

align-items

The align-items property in CSS is used to align flex or grid items along the cross-axis within their container. The cross-axis is perpendicular to the main axis, which is defined by the flex-direction property in Flexbox.

Syntax

In a Flexbox layout, align-items can take the following values:

• flex-start: Aligns items at the start of the container's cross-axis.
• flex-end: Aligns items at the end of the container's cross-axis.
• center: Aligns items at the center of the container's cross-axis.
• baseline: Aligns items based on their baseline.
• stretch: Stretches the items to fill the container (default).

/* Flexbox Syntax */
.flex-container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items Examples

Example: Align Center

.flex-container {
  display: flex;
  align-items: center;
}

Here, all flex items will be centered along the cross-axis within the flex container.

align-items Best Practices

1. Responsive Design: Use align-items in conjunction with media queries to adapt layouts to different screen sizes.

2. Nested Containers: You can use nested flex containers with different align-items settings to create complex layouts.

3. Readability: When using align-items, it's helpful to comment or document why a particular alignment is chosen, especially if it deviates from the default stretch.

4. Browser Compatibility: The align-items property is well-supported in modern browsers, but always check compatibility if you need to support older versions.

align-content

The align-content property in CSS is used to align a flex container lines within the container's when there is extra space in the cross-axis. This property is particularly useful when you have multiple rows or columns and want to distribute the space among them.

Syntax

In a Flexbox layout, align-content can take the following values:

• flex-start: Packs all lines at the start of the flex container.
• flex-end: Packs all lines at the end of the flex container.
• center: Packs all lines at the center of the flex container.
• space-between: Distributes lines evenly; the first line is at the start, and the last line is at the end.
• space-around: Distributes lines evenly with equal space around each line.
• stretch: Stretches the lines to take up the remaining space (default).

/* Flexbox Syntax */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Required for multiple lines */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content Examples

Example: Align Center

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Here, all flex lines will be centered along the cross-axis within the flex container.

align-content Best Practices

1. Responsive Design: Use align-content in conjunction with media queries to adapt layouts to different screen sizes.

2. Nested Containers: You can use nested flex containers with different align-content settings to create complex layouts.

3. Readability: When using align-content, it's helpful to comment or document why a particular alignment is chosen, especially if it deviates from the default stretch.

4. Browser Compatibility: The align-content property is well-supported in modern browsers, but always check compatibility if you need to support older versions.

Flex Example

Here's a simple example:

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: LightSkyBlue;
  text-align: center;
  line-height: 100px;
}

In this example, the .container will space out its children .item evenly along the main axis and center them along the cross axis.

Flex container Best Practices

1. Start Simple: Flexbox is best understood by starting with a simple layout and gradually adding complexity.

2. Browser Compatibility: While Flexbox is widely supported, always check for browser compatibility, especially for older versions.

3. Use Fallbacks: Provide fallback layouts for browsers that don't support Flexbox.

4. Accessibility: Make sure your flex layouts are accessible, paying special attention to the order of elements.

List Example with Flex

Title of item

Short description of the item

0.4 ETH

30s ago

Title of item

Short description of the item

0.4 ETH

30s ago

Title of item

Short description of the item

0.4 ETH

30s ago

Title of item

Short description of the item

0.4 ETH

30s ago

html

index.html

<html>

<head>
    <link rel="stylesheet" type="text/css" href="./main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
    <div class="items-list">
        <div class="list-item">
            <img src="https://picsum.photos/64/64" />
            <div class="list-text">
                <h4>Title of item</h4>
                <p> Short description of the item</p>
            </div>
            <div class="list-price">0.4 ETH</div>
            <div class="list-period">30s ago</div>
        </div>
        <div class="list-item">
            <img src="https://picsum.photos/64/64" />
            <div class="list-text">
                <h4>Title of item</h4>
                <p> Short description of the item</p>
            </div>
            <div class="list-price">0.4 ETH</div>
            <div class="list-period">30s ago</div>
        </div>
        <div class="list-item">
            <img src="https://picsum.photos/64/64" />
            <div class="list-text">
                <h4>Title of item</h4>
                <p> Short description of the item</p>
            </div>
            <div class="list-price">0.4 ETH</div>
            <div class="list-period">30s ago</div>
        </div>
        <div class="list-item">
            <img src="https://picsum.photos/64/64" />
            <div class="list-text">
                <h4>Title of item</h4>
                <p> Short description of the item</p>
            </div>
            <div class="list-price">0.4 ETH</div>
            <div class="list-period">30s ago</div>
        </div>
    </div>
</body>
</html>

css

main.css

.items-list {
padding: 2px 6px;
background: #ffffffcc;
backdrop-filter: blur(10px);
backdrop-filter: opacity(20%);

border: 2px solid #CCC;
filter: drop-shadow(0 6px 6px rgba(0,0,0,0.1));
margin: 10px;
padding: 10px;
}

.list-item {
display: flex;
width: 100%;
padding: 5px;
flex-wrap: wrap;
gap: 10px;
background-color: #FFF;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

.list-item img {
border-radius: 10px;
width: 64px;
height: 64px;
}

.list-text{
padding-top: 5px;
flex-grow: 1;
align-items: center;
}

.list-text h4{
margin: 4px;
}

.list-text p{
margin: 4px;
color: #999
}

.list-price {
margin: 8px;
width: 60px;
}

.list-period {
margin: 8px;
width: 60px;
color: #555
}