Flex layout allows subitems to maintain their own height

When using Flex layout, you will find that when arranged horizontally, the height of all child items becomes the same.

This is because Flex layout will default to:

• Arrange all subitems horizontally.
• By default, no automatic line wrapping is enabled.
• Makes the child the same width as its content and sets the height of all children to the height of the tallest child.

It is very inconvenient to set the background color in this way. Then you can set align-items to flex-start or other values ​​of the align-items attribute on the parent item, and the child item will maintain its own height.

.fat{
	display: flex;
	align-items:flex-start;
}

The effect is as follows:

This is the end of this article about how to use Flex layout to keep child items at their own height. For more information about how to use Flex layout to keep child items at their own height, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!