A Step-by-Step Guide to Learning CSS Flex

Flexbox is a powerful CSS layout module that allows you to create flexible and responsive layouts. It is especially useful for building one-dimensional layouts, either in a row or a column.

Here are some use cases for when to use Flexbox:

• Navigation bars
• Footers
• Product cards
• Image galleries
• Forms
• Blogs
• Portfolios
• Dashboards

Both Flexbox and CSS Grid are powerful layout tools, but they have different strengths and weaknesses. In general, CSS Grid is a better choice for complex layouts, while Flexbox is a better choice for simpler layouts.

Basic CSS Flex Concepts

• Flex Container: To use Flexbox, you first need to define a flex container by setting the  display property to flex or inline-flex. This container becomes the parent element for the flex items.
• Flex Items: The child elements of a flex container are called flex items. These items can be aligned and positioned within the container using various Flexbox properties.
• Main Axis and Cross Axis: Flexbox works in one dimension at a time, either as a row or as a column. The main axis is the primary axis along which flex items are laid out, and the cross axis is perpendicular to the main axis.
• Flex Direction: The flex-direction property determines the direction of the main axis. It can be set to row (default), row-reverse, column, or column-reverse to define the flow of flex items.

CSS flex axis

In CSS, flexbox is a layout module that provides an efficient way to arrange and distribute items within a container. The flexbox layout is based on two axes

1. the main axis
2. the cross axis.

Understanding the main and cross axes in CSS flexbox is crucial for creating effective layouts for your web pages. Once you have a thorough understanding of these concepts, flexbox can be utilized to create user interfaces that are responsive and dynamic.

In CSS Flexbox, the main axis is the primary axis along which flex items are placed inside a flex container. The default direction of the main axis is from left to right when you use flex-direction: row;. In this example, flex-direction: row; is set, creating a row layout. The justify-content property is used to align the items horizontally (along the main axis), and align-items (along the cross axis) is used to align the items vertically.

The cross axis is perpendicular to the main axis and is defined by the opposite direction of the `flex-direction` property. For example, if the `flex-direction` is set to `row`, the cross axis will be vertical. The cross axis is used to align the flex items within the container.

Flex direction row :

Example1 where flex diretion is row, as result the main axis is horizontal and cross axis is vertical. The justify-content property is used to set the items on the main axis.

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

<style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-around; /* Align items horizontally */
      align-items: center; /* Align items vertically */
      height: 200px;
    }

    .item {
      width: 100px;
      height: 100px;
      font-size: 40px;
      background-color: slateblue;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>

How cross-axis is used

The cross-axis is used to align the flex items on the cross axis. This can be done using the following CSS properties:

• align-items: Aligns all of the flex items on the cross axis.
• align-self: Aligns a specific flex item on the cross axis.

Flex direction column :

When using the CSS Flexbox layout with a flex direction of “column”, then the main axis is on vertical and the cross axis refers to the horizontal axis. The main axis, which determines the direction of the flex items, is vertical in a column layout.

To control the alignment of flex items along the cross axis, you can use the “align-items” property. This property accepts several values, including:

• “flex-start”: aligns items to the start of the cross axis (left side)
• “flex-end”: aligns items to the end of the cross axis (right side)
• “center”: aligns items to the center of the cross axis
• “stretch”: stretches items to fill the entire cross axis

For example, if you want to center the flex items along the horizontal axis in a column layout, you can add the following CSS rule to the container element:

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

Common Flexbox Properties can used inside flex container

When working with flex we have two part, flex container and individual flex items. The CSS properties that we can used inside Flex main container are.

• Justify Content: The justify-content property is used to align flex items along the main axis. It controls the distribution of space between and around flex items. Common values include:
  • flex-start: Flex items are aligned to the start of the flex container.
  • flex-end: Flex items are aligned to the end of the flex container.
  • center: Flex items are centered within the flex container.
  • space-between: Flex items are evenly distributed with space between each item.
  • space-around: Flex items are evenly distributed with space between each item and half a space at the start and end of the flex container.
• Align Items: The align-items property is used to align flex items along the cross axis. It controls how flex items are aligned vertically within the flex container. Common values include:
  • flex-start: Flex items are aligned to the start of the flex container.
  • flex-end: Flex items are aligned to the end of the flex container.
  • center: Flex items are centered within the flex container.
  • baseline: Flex items are aligned to their baseline.
  • stretch: Flex items are stretched to fill the available space in the flex container.
• Flex Wrap: By default, flex items are laid out in a single line. The flex-wrap property allows flex items to wrap onto multiple lines if there is not enough space. Values include:
  • nowrap (default): Flex items do not wrap onto multiple lines.
  • wrap: Flex items wrap onto multiple lines as needed.
  • wrap-reverse: Flex items wrap onto multiple lines in reverse order.
• Align Content: The align-content property is used to align flex lines when there is extra space along the cross axis. It applies to multi-line flex containers. Common values include:
  • flex-start: Flex lines are aligned to the start of the flex container.
  • flex-end: Flex lines are aligned to the end of the flex container.
  • center: Flex lines are centered within the flex container.
  • space-between: Flex lines are evenly distributed with space between each line.
  • space-around: Flex lines are evenly distributed with space between each line and half a space at the start and end of the flex container.

These properties allow you to control the layout and positioning of the flex items within the flex container. Additionally, there are some other properties that can be used to fine-tune the appearance of the flex container, such as flex-flow, gap, margin, padding, and border.

Flex item css properties

In CSS, a flex item is an element that is a child of a flex container and is being laid out using the flexbox layout model. Flex items can be styled using a variety of CSS properties. Here are some of the most commonly used properties that allow us to create flexible and responsive layouts that adapt to different screen sizes and content.

1. flex-grow: This property controls how much the flex item should grow in relation to its siblings if there is extra space in the container. It takes a unitless value that represents a proportion of the available space.
2. flex-shrink: This property controls how much the flex item should shrink in relation to its siblings if there is not enough space in the container. It takes a unitless value that represents a proportion of the necessary space.
3. flex-basis: This property sets the initial size of the flex item before any available space is distributed. It can be set to a length value like pixels or percentage, or to the keyword “auto” which means to use the element’s intrinsic size.
4. flex: This is a shorthand property that sets the values of flex-grow, flex-shrink, and flex-basis in one declaration. It takes up to three values, separated by spaces.
5. align-self: This property allows you to override the alignment of a single flex item within the container. It takes the same values as align-items, which include “flex-start”, “flex-end”, “center”, “baseline”, and “stretch”.
6. order: Specifies the order of the flex items. The default value is 0

Let first demonstrate an example on flex grow having its value 1 and 2 on some of its items.

    <div class="container">
      <div class="item item1">Item 1 : FLEX GROW 1</div>
      <div class="item item2">Item 2 : FLEX GROW 2</div>
      <div class="item item3">Item 3</div>
      <div class="item item4">Item 4</div>
    </div>

      .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
      }

      .item {
        height: 100px;
        width: 100px;
        background-color: slateblue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: white;
      }

      .item1 {
        flex-grow: 1;
      }
      .item2 {
        flex-grow: 2;
      }

flex-basis : This property defines the default size of a flex item before the remaining space is distributed. It can be a specific length (e.g., 200px), a percentage (e.g., 30%), or one of the keywords (auto, content, min-content, max-content, etc.).

     .item1 {
        flex-basis: 200px;
      }
      .item2 {
        flex-basis: 400px;
      }

align-self: This property allows the default alignment set by the flex container’s align-items property to be overridden for individual flex items. It accepts the same values as align-items.

flex: 2 1 auto;

The CSS property you’re referencing, flex: 2 1 auto; is a shorthand property used in Flexbox. This property is a shorthand for three individual properties: flex-grow, flex-shrink, and flex-basis.