display: flex

Any element can be a flex container. Flex containers are helpful tools for creating websites that respond to changes in screen sizes. Child elements of flex containers will change size and location in response to the size and position of their parent container.

For an element to become a flex container, its display property must be set to flex.

In the example above, all divs with the class container are flex containers. If they have children, the children are flex items. A div with the declaration display: flex; will remain block level — no other elements will appear on the same line as it.

However, it will change the behavior of its child elements. Child elements will not begin on new lines. In the exercises that follow, we will cover how the flex display property impacts the positioning of child elements.

Instructions

1.In the <div> with id flex, add a display property with a value of flex. Compare the two divs in the browser.

Documento base: https://drive.google.com/drive/folders/1GUdlgxkpWD1yyjJPhhk48UGdGs94XrFm?usp=sharing