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-basis
is 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:
Implement the example from this lesson on your computer. Try different values for the flex property.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
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.