Register to get access to free programming courses with interactive exercises

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

Additional assignment

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


Hexlet Experts

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

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.