Flex items and the block model

In the previous Flexbox chapter we were introduced to the basic concepts of this layout method, and we thoroughly explored how flex items are aligned. This chapter will be dedicated to learning how to control the sizes of flex items.

Let’s start with a simple question. How does our familiar block model work inside a flex container? Are there any differences in the behavior of the familiar properties?

The width, height, and internal margins and frames for flex containers and flex items work just as you would expect them to: the total size of items is determined by these components. This behavior can also be changed using the box-sizing property.

There are several important differences:

• Flex items, in contrast to block elements, are not stretched to the entire width of the container by default.
• The float property does not apply to flex items.

Now let’s work with the properties that we have already learned and make sure that they work in the usual way.