Detailed explanation of the scaling baseline and basic size concepts in CSS Flex flexible layout

Detailed explanation of the scaling baseline and basic size concepts in CSS Flex elastic layout

Introduction:

As the complexity of Web pages increases, traditional The box model layout method gradually revealed its limitations. In order to solve the layout problem, CSS Flex elastic layout came into being. Flex layout provides a flexible way to lay out elements, making the page more adaptable and suitable for a variety of different devices and screen sizes. In Flex layout, scalable baseline and basic size are important concepts. This article will explain them in detail and provide corresponding code examples.

1. Flex line (flex line)

The flex baseline is the concept of a row of elements in a Flex container. Each flex baseline consists of one or more rows of Flex items. The Flex container arranges elements in the horizontal direction by default, and will automatically wrap when there are multiple lines, forming multiple scalable baselines.

The following is a sample code:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 0 200px;
    height: 100px;
}

In the above code, .container is a Flex container and .item is a Flex item. By setting the display property of .container to flex, you can make it a Flex container. At the same time, by setting the flex-wrap property of .container to wrap, the Flex items can be automatically wrapped into multiple flexible baselines.

2. Basic size (flex basis)

The basic size is an attribute of the Flex item, which determines the initial size of the Flex item on the expansion baseline. The basic size can be set through the flex property. The flex property is a shorthand property that includes three specific properties: flex-grow, flex-shrink and flex-basis. Among them, flex-grow is used to set the flexibility of Flex items, flex-shrink is used to set the shrinkage of Flex items, and flex-basis is used to set the basic size of Flex items.

The following is a sample code:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

.container {
    display: flex;
}

.item {
    flex: 1 0 200px;
    height: 100px;
}

In the above code, the .item sets the flex property to 1 0 200px. Among them, the value of flex-grow is 1, which means that the Flex item can expand and contract according to the available space, and the ratio is 1; the value of flex-shrink is 0, which means that the Flex item will not be shrunk when there is insufficient space; the value of flex-basis is 200px means that the basic size of the Flex item is 200px.

Summary:

In Flex layout, the scaling baseline and basic size are very important concepts. Understanding and mastering these concepts can help us better use Flex layout and achieve flexible page layout. By flexibly configuring the scaling baseline and basic size, we can achieve adaptive layout under different screen sizes. I hope the explanations and sample code in this article will be helpful to you.

The above is the detailed content of Detailed explanation of the scaling baseline and basic size concepts in CSS Flex flexible layout. For more information, please follow other related articles on the PHP Chinese website!