Fine-Tuning Flex-shrink and Flex-basis for Responsive CSS Layouts

Flex-shrink:

flex-shrink is a property in CSS that is used in Flexbox layouts to define how an item should shrink in size relative to the other items in the flex container when there’s not enough space available. It determines the ability of a flex item to shrink if necessary.

The flex-shrink property takes a unitless value, which serves as a proportion. The default value is 1, meaning all flex items will shrink equally if needed. If an item has a flex-shrink value of 0, it won’t shrink, and the remaining space will be distributed among other items.

Here’s a simple example to illustrate the flex-shrink property:

<!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;
      width: 300px;
      border: 1px solid #ccc;
    }

    .flex-item {
      flex-shrink: 1;
      border: 1px solid #f00;
      margin: 5px;
      padding: 10px;
      box-sizing: border-box;
    }

    .no-shrink {
      flex-shrink: 0;
    }
  </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 no-shrink">Item 3 (no shrink)</div>
  </div>
</body>
</html>

Output:

Screenshot-2023-11-11-233726 In this example, there's a flex container with three flex items. The first two items have the default `flex-shrink` value of 1, meaning they can shrink if needed. The third item has `flex-shrink: 0`, indicating that it won't shrink.

If the container’s width is reduced and there’s not enough space for all items, the items with flex-shrink: 1 will shrink proportionally, while the item with flex-shrink: 0 will maintain its size.

Flex-basis:

flex-basis is a CSS property that defines the initial size of a flex item along the main axis before any remaining space is distributed. It specifies the ideal size of a flex item before it’s placed into a flex container. This property is often used in conjunction with flex-grow and flex-shrink to control the sizing behavior of flex items.

Here’s a simple 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;
    }

    .flex-item {
      flex-basis: 100px; /* Initial size of the flex item */
      background-color: lightblue;
      margin: 5px;
      border: 1px solid darkblue;
    }
  </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>

Output:

Screenshot-2023-11-11-234332

In this example, we have a flex container with three flex items. The flex-basis property is set to 100px for each item, specifying that they should initially have a size of 100 pixels along the main axis.

You can adjust the flex-basis value to change the initial size of the flex items. It could be set in pixels, percentages, or any other length unit.

Keep in mind that flex-basis is just one part of the flex layout system. The actual size of the flex items may be adjusted based on the values of flex-grow and flex-shrink, as well as the available space in the flex container.

Previous
Mastering Flex-wrap, No-wrap, and Flex-flow for Dynamic CSS Layouts
Next
Optimizing Layouts with CSS Justify-content Flex-start to Space-evenly