Flex — CSS: Site Adaptability

• Additional materials
• Do it yourself

In the course about Flex on Hexlet, we have already discussed how the Flex module helps to design sites. Here we will describe the approaches that allow you to adapt your site for mobile devices quickly, although minimally.

For now, our main topic will be the flex and flex-wrap properties.

As in the last lesson, we observed three blocks arranged in one line. In contrast to the lesson on fluid layout, let's set the width of each block to 266.66px.

Let's make the width of the blocks fixed:

.container {
  width: 800px;
}

.section {
  display: flex;
}

.section .item {
  flex: 0 0 266.66px;
}

See the Pen css_adaptive_percent_1 by Hexlet (@hexlet) on CodePen.

What happens to these elements if the resolution is less than 1000 pixels wide? We end up with horizontal scrolling. As was said before, this is not what we want. It is not convenient for users. They may miss important information on our page:

See the Pen css_adaptive_flex_1 by Hexlet (@hexlet) on CodePen.

Note that the last block is out of the visible area. The user may not notice they can scroll, or you may prohibit scrolling. Then, the information from the last block will be unavailable to the user.

We can prevent this disaster by using the rule flex-wrap. It will prompt the browser to move elements that do not fit in the .container.

Let's add this rule to the .container selector and see how our block will look when its width is 500px:

.section {
  display: flex;
  flex-wrap: wrap;
}

See the Pen css_adaptive_flex_2 by Hexlet (@hexlet) on CodePen.

Great result! The hidden block has moved to the second line. The single flex-wrap rule is enough to adjust Flex elements to the screen resolution sometimes.

But as we said at the beginning of the lesson, we can also call on the flex rule in addition to using flex-wrap. From the last course on the Flex module, we know that the flex property combines three properties:

• flex-grow
• flex-shrink
• flex-basis

Let us make blocks to behave adaptively and fluidly. We should allow elements to shrink and occupy free space if available. Then, we set the base width (flex-basis property) to 266.6px. Since we allow blocks to shrink as well as take up free space, the flex-basis property is the default in this case:

.section .item {
  flex: 1 1 266.66px;
}

Now let's look at the behavior of the blocks in the three different resolutions:

• 800 pixels wide
• 600 pixels wide
• 400 pixels wide

See the Pen css_adaptive_flex_3 by Hexlet (@hexlet) on CodePen.

Additional materials

• flex-wrap
• flex

Do it yourself

Implement the example from this lesson on your computer. Try different values for the flex property.