Skip to content

Latest commit

 

History

History
187 lines (146 loc) · 3.91 KB

1_FlexBoxIntro.md

File metadata and controls

187 lines (146 loc) · 3.91 KB
Raw

CSS Flexible Box Layout, commonly known as Flexbox, is a one-dimensional layout model that provides an efficient way to design complex web layouts and distribute space among items in a container. Flexbox is particularly useful for building responsive and dynamic user interfaces.

Key Concepts:

  1. Flex Container: The parent element with display: flex; or display: inline-flex; becomes a flex container. Example:
.flex-container {
  display: flex;
}

Flex Items: The child elements inside a flex container are the flex items. By default, flex items are laid out in a row. Example:

.flex-item {
  flex: 1; /* Flex shorthand for flex-grow, flex-shrink, and flex-basis */
}

Main Axis and Cross Axis: Flexbox works along two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property (row, row-reverse, column, column-reverse). The cross axis is perpendicular to the main axis.

Justify Content: justify-content aligns flex items along the main axis. Example:

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

Align Items: align-items aligns flex items along the cross axis. Example:

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

Flex Direction: flex-direction sets the direction of the main axis. Example:

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

Example: Consider a simple navigation bar using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .nav-bar {
      display: flex;
      justify-content: space-around;
      background-color: #eee;
      padding: 10px;
    }

    .nav-item {
      flex: 1;
      text-align: center;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="nav-bar">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Contact</div>
  </div>
</body>
</html>

In this example: The parent container (nav-bar) is a flex container. The child items (nav-item) are flex items. justify-content: space-around; evenly spaces the items along the main axis.

What’s the difference between a flex container and a flex item?

Difference between a Flex Container and a Flex Item:

Flex Container: The flex container is the parent element that is set to have display: flex; or display: inline-flex;. It establishes the flex formatting context and contains the flex items. Properties like justify-content, align-items, and flex-direction are applied to the flex container.

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

Flex Item: Flex items are the child elements of the flex container. They are the elements directly affected by the flex properties, such as flex-grow, flex-shrink, and flex-basis. Flex items can also be flex containers themselves, creating nested flex structures.

.flex-item {
  flex: 1;
}

How do you create a flex item?

To create a flex item, designate an element as a child of a flex container and apply the display: flex; property to the container. The child element automatically becomes a flex item.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
    }

    .flex-item {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

In this example, the <div> elements inside the flex-container become flex items automatically, and the properties applied to .flex-item affect the layout within the flex container.