Flex — CSS: Site Adaptability

In the course about Flex, a lot was said about the fact that the module helps developers with adapting sites for mobile devices. The approaches that will be described in the lesson will allow you to quickly, although minimally, adapt your site to be used on mobile devices. Our main assistance will be the two properties we talked about in the Flex course: flex and flex-wrap.

As in the last lesson, let's take three blocks on one line as an example. Unlike the lesson on fluid layout, let's set the width of each block to 333.33px. In other words, let's make some fixed-width blocks.

.container {
  display: flex;
  width: 1000px;
}

.flex-item {
  width: 333.3px;
  padding: 20px;
  box-sizing: border-box;

  color: #FFF;
  font-size: 12px;
}

What happens to these elements if the resolution is less than 1000 pixels wide? We'll end up with horizontal scrolling. As was said before, this is not what we want, it's not super clear to the user, which means they may miss important information on our page.

Note that the last block is completely out of the visible area. If the user doesn't notice they can scroll, or if you accidentally (or maybe not so accidentally) prohibit it, then the information from the last block will be unavailable to the user.

This disaster can be prevented by using the rule flex-wrap, which 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 looks when it's 667px wide.

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
}

Great result! Now the block that was hidden away last time has moved to the second line. In some situations, a single flex-wrap rule is enough to make flex elements adjust to the screen resolution.

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

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

To allow blocks to behave adaptively and fluidly, you must allow elements to shrink as needed, and to occupy free space if available. Set the base width ( flex-basis property) to 333.3px. Since we allow blocks to shrink as well as take up free space, flex-basisis the default in this case.

.flex-item {
  flex: 1 1 333.3px;
  padding: 20px;
  box-sizing: border-box;

  color: #FFF;
  font-size: 12px;
}

When adding this element of adaptability, we need to remove the 1000px width of the .container block. This width is now set with the elements. The second solution is to use the max-width property.

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

• 1000 pixels wide.
• 667 pixels wide.
• 400 pixels wide.

Additional materials

• flex-wrap
• flex

Additional assignment

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

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.