Lesson 1,
Topic 1
In Progress
Child properity
After creating the flex container and setting the flex-direction property, Sara wanted to adjust the layout of the child elements within the container.
She used the following child properties to control the layout of the child elements:
- Flex-grow: This property determines how much the child element should grow relative to the other child elements in the container. Sara used the flex-grow property to make sure that all of the child elements were given equal space within the container:
.item {
flex-grow: 1;
}
- Flex-shrink: This property determines how much the child element should shrink relative to the other child elements in the container. Sara used the flex-shrink property to make sure that all of the child elements were given equal space within the container:
.item {
flex-shrink: 1;
}
- order property: Sara wanted to add one final touch to the design. She wanted to rearrange the order of the child elements on small screens so that the product names were displayed above the product images. To do this, Sara used the order property to change the order of the child elements on small screens:
@media (max-width: 600px) {
.name {
order: -1;
}
}
- Align-self property: this caused the child element with the class name to be displayed before the other child elements on small screens. Sara also wanted to vertically align the product images within the flex container. She used the align-self property to do this:
.image {
align-self: center;
}
This caused the child element with the class image to be vertically aligned with the center of the flex container.
With these child properties in place, Sara was able to fine-tune the layout of the child elements within the flex container and Sara was pleased with how easy it was to use Flexbox to create a responsive layout. 😇