Register to get access to free programming courses with interactive exercises

Flex CSS: Site Adaptability

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.


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

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.