3 attributes of FLEX (1) Flex-grow

Source: Internet
Author: User
Flex-grow

This article first introduces the issue of flex value. later articles will explain in depth the application of flexible layout.
1. Flex is composed of flex-grow, flex-shrink, and flex-basis. View

Among them, flex-grow indicates how much space the parent container has on the spindle.
Understanding about the remaining space: how much space is available to the parent container (elastic box) in the direction of the main axis.

The outer Div has an elastic layout. The remaining space is box. Width-item01.width-item02.width-item03.width.
The default value of flex-grow is 0 and it is not a negative number.

Eg01:

Result:

Set the class = "item02" Div and style to flex: 2. effect:

Only the class = "item02" Div sets the flex: 2 style, meaning that the remaining space is divided into two parts. The default value 0 for item02.flex indicates that no space is left.

3 attributes of FLEX (1) Flex-grow

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.