Advanced Flexbox

Utilize Flexbox to implement responsive design that adapts from smartphones to desktops, allowing for dynamic layouts.

1. Responsive Design with Flexbox

Responsive web design adjusts the layout and appearance of content automatically based on the screen size, optimizing websites for various devices.

For instance, when the browser window is wide, multiple items can be arranged in a row. When the window narrows, the items can be stacked vertically for a better user experience.

Copy
/* By default, arrange items in the container horizontally */
.flex-container {
  display: flex;
  flex-direction: row;
}

/* Arrange items in the container vertically if the screen width is 600px or less */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

2. Dynamic Flexbox Item Alignment

1. flex-grow:

   • Determines how much a flex item will grow relative to the rest of the flex items inside the flex container.

   • If the value is 0, the item will not grow to fill the extra space. If the value is 1 or higher, the item will take up extra space relative to other items.

2. flex-shrink:

   • Determines how much a flex item will shrink if there is not enough space in the flex container.

   • If the value is 0, the item will not shrink. If the value is 1 or higher, the item will shrink relative to other items.

3. flex-basis:

   • Defines the initial size of the flex item.

   • For example, flex-basis: 200px; means the initial size of the item is 200px. The auto value means the item is sized based on its content size.

Copy
.item {
  flex-grow: 1; /* Distribute remaining space equally among items */
  flex-shrink: 1; /* Shrink items at the same rate */
  flex-basis: 200px; /* The initial size of the item is 200px */
}

The flex property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties in a single declaration.

The values for flex-grow, flex-shrink, and flex-basis will be applied in that order.

Copy
/* flex: <flex-grow> <flex-shrink> <flex-basis> */
.item {
  flex: 1 1 0;
}

In this code:

• The value of flex-grow is 1. Therefore, the item will take up equal parts of the remaining space.

• The value of flex-shrink is also 1. As the screen size decreases, the item will shrink at the same rate.

• The value of flex-basis is 0. The initial size of the item is set to 0. In this case, the size of the item is determined by its content.

Using the flex property can make your code more concise by setting multiple properties at once.

Note that flex: 1; is shorthand for flex-grow: 1;, flex-shrink: 1;, and flex-basis: 0%; combined.

This means the item will grow to take up extra space, shrink as needed, and have an initial size of 0%.

Follow the emphasized parts of the code and input accordingly.