Learn CSS3 flex layout, how to create a flexible web page layout?

Learn CSS3 flex layout, how to create a flexible web page layout?

In web design, layout plays a vital role. With a good layout, your webpage can look neater, more beautiful, and adapt to different screen sizes and devices. CSS3's flex layout provides a flexible and powerful way to create web page layout. This article will introduce what flex layout is and how to use it to create flexible web page layouts.

1. What is flex layout
Flex layout is a new layout method provided in CSS3, also known as flexible layout. It is based on the concepts of main axis and cross axis, and achieves flexible layout effects by setting a series of properties for the container and its internal elements. Through flex layout, we can easily achieve effects such as adaptive elements, center alignment, and even space distribution.

2. Flex container and flex item
In flex layout, there are two important concepts, namely flex container and flex item. A flex container is a parent element that contains a group of flex items. The attributes and values ​​of this parent element determine how the child elements are laid out. Flex items are child elements directly contained by the flex container.

3. Properties of flex container

1. display: flex
   This is the first step to use flex layout. Just set the display property of the container to flex. Enable flex layout. It will arrange the elements inside the container on a row, and by default the elements will be sorted in the order they appear in the HTML.
2. flex-direction
   This property determines how elements are arranged in the container. It has the following optional values:
3. row: Horizontal direction, arranged from left to right (default value)
4. row-reverse: Horizontal direction, arranged from right to left
5. column: Vertical direction, arranged from top to bottom
6. column-reverse: Vertical direction, arranged from bottom to top
7. justify-content
   This attribute determines the position of the element on the main axis alignment on. It has the following optional values:
8. flex-start: Aligned close to the start position of the main axis (default value)
9. flex-end: Aligned close to the end position of the main axis
10. center : Centered alignment
11. space-between: Evenly divide the space on the main axis, with the first and last elements close to both sides of the container
12. space-around: Evenly divide the space on the main axis, between each element and the first and last elements Equal distance from the container
13. align-items
    This attribute determines the alignment of the element on the cross axis. It has the following optional values:
14. flex-start: Alignment close to the starting position of the cross axis
15. flex-end: Alignment close to the end position of the cross axis
16. center: Centered alignment
17. baseline: Align according to the baseline of the element
18. stretch: Stretch the element to fill the cross-axis space

4. Properties of flex items

1. flex-grow
   This property determines the scaling ratio of the flexible item in the remaining space. If the parent container has extra space, the value of the flex-grow property of each flex item will determine the proportion they are allocated. The default value is 0, which means no scaling.
2. flex-shrink
   This property determines the shrinkage ratio of flexible items when there is insufficient space. If the parent container does not have enough space to accommodate all items, the value of the flex-shrink property of each flex item will determine the proportion by which they shrink. The default value is 1, which means equal proportional shrinkage.
3. flex-basis
   This property determines the initial size of the flexible item in the main axis direction. It can be set to a specific value (such as pixels) or a percentage. The default value is auto, which automatically allocates the size based on the project content.
4. align-self
   This property determines the alignment of a single item on the cross axis. It can override the container's align-items property. Its optional values ​​are the same as align-items.

5. Flexible web page layout example
The following is an example of web page layout created using flex layout:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }

        .main {
            flex: 1;
            width: 100%;
            background-color: #eaeaea;
        }

        .sidebar {
            width: 200px;
            background-color: #ccc;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="main">
            <div class="sidebar">Sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Using the above code, a flexible web page layout can be achieved, in which The head and bottom have a fixed height, and the middle part is divided into sidebar and content area. The middle part can be flexibly expanded according to the height of the content. By setting the flex attribute of each element and the alignment of the container, you can implement a web page layout that adapts to different screen sizes.

6. Summary
CSS3’s flex layout provides a flexible and powerful way to create web page layout. By flexibly using various properties of flex containers and flex items, you can easily achieve effects such as element adaptation, center alignment, and even space distribution. By learning and mastering flex layout, we can create more flexible, beautiful and adaptable web page layouts to different screen sizes and devices.

The above is the detailed content of Learn CSS3 flex layout, how to create a flexible web page layout?. For more information, please follow other related articles on the PHP Chinese website!