본문으로 건너뛰기

Advanced Flexbox Techniques

Advanced Flexbox Techniques

Flexbox is one of the most commonly used layout implementation methods in modern web design.


  1. Responsive Design and Flexbox

Responsive web design automatically adjusts the layout and appearance of content according to screen size, optimizing the website for various devices.

For instance, while a wide browser window may display multiple items in a single row, a narrower window would stack the items vertically, which is a classic example of responsive design.


CSS
/* By default, items within the container are laid out horizontally */
.flex-container {
display: flex;
flex-direction: row;
}

/* When the screen width is 600px or less, items within the container are stacked vertically */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}

  1. Dynamic Flexbox Item Alignment

flex-grow, flex-shrink, flex-basis Properties

  1. flex-grow:

    • This property determines how a flex item will grow relative to the rest of the flex items in the flex container when extra space is distributed.

    • If the value is 0, the item will not grow to fill the extra space. If the value is greater than 1, the item will grow relative to the other items.

  2. flex-shrink:

    • This property defines how a flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space.

    • If the value is 0, the item will not shrink due to space constraints. If the value is 1 or greater, the item will shrink in proportion to the other items.

  3. flex-basis:

    • This property sets the initial main size of a flex item.

    • For instance, flex-basis: 200px; means the item's starting size is 200 pixels. The value auto assigns the size based on the item's content size.

CSS
.item {
flex-grow: 1; /* Distribute remaining space evenly among items */
flex-shrink: 1; /* Shrink items at the same ratio */
flex-basis: 200px; /* The default size of an item is 200px */
}

flex Property

flex is a shorthand property that sets the three properties flex-grow, flex-shrink, and flex-basis at once.

The values of flex-grow, flex-shrink, and flex-basis are applied to the respective properties in order.

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

In this code:

  • The value of flex-grow is 1. Thus, the item will take up an equal amount of the remaining space.

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

  • The value for flex-basis is 0. The default 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 allows you to set multiple properties at once, which can make the code more concise.


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

This means that the item is allowed to grow to fill the extra space, shrink if necessary, and the initial size is set to 0%.


Follow the asterisk-highlighted part of the code to try inputting it.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!