How to achieve adaptive left and right sidebars through CSS Flex layout-CSS Tutorial-php.cn

How to achieve adaptive left and right sidebars through CSS Flex layout

WBOY

Release： 2023-09-26 10:57:02

Original

1509 people have browsed it

如何通过Css Flex 弹性布局实现左右侧边栏的自适应

How to realize the adaptive layout of the left and right sidebars through Css Flex elastic layout

Introduction: With the continuous development of web design, realizing the adaptive layout of the page has become An important requirement. CSS Flex layout is a good way to solve this problem. This article will introduce how to implement the adaptive layout of the left and right sidebars through CSS Flex elastic layout, and give detailed code examples.

1. Introduction to Flex Layout
1.1 Flexible Container and Flexible Item
Flex layout implements layout by setting the sub-elements in the container as flexible items. The parent element is called a flex container and the child elements are called flex items. In a flexible container, we can control the arrangement of child elements and the space they occupy by setting some properties.

1.2 Properties of flexible containers

display: flex: Set the container as a flexible container;
flex-direction: Set the arrangement of flexible items, you can set Is row (horizontal direction) or column (vertical direction);
justify-content: Set the alignment of the flexible item on the main axis, which can be set to flex-start (the starting point is near the left or top), flex-end (The end point is near the right or bottom), center (aligned in the center), space-between (aligned at both ends, equal spacing between items), space-around (equal spacing on both sides of the items, half of the spacing between items);
align-items: Set the alignment of flexible items on the cross axis, which can be set to flex-start (the starting point is near the top or left), flex-end (the end point is near the bottom or right), center (center alignment) , stretch (stretch to fill the entire cross axis), baseline (baseline alignment of the first line of text of the item).

1. Properties of elastic items

flex: Set the scaling ratio of elastic items. The default value is 0, which is equivalent to max-width: none; flex-grow 0 ; flex-shrink: 0; The specific value can be an integer (such as 1) or a decimal (such as 1.5);
flex-basis: Set the initial size of the flexible item on the main axis, the default value is auto, Equivalent to the original size of the item;
align-self: Sets the alignment of the flexible item itself on the cross axis.

2. Example of adaptive layout of left and right sidebars
Let’s use a specific example to demonstrate how to implement adaptive layout of left and right sidebars through Css Flex elastic layout.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右侧边栏自适应布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: flex;
            flex-direction: row;
        }
        
        .sidebar {
            background-color: #f1f1f1;
            width: 20%;
            flex-grow: 1;
        }
        
        .content {
            background-color: #eee;
            width: 80%;
            flex-grow: 3;
        }
        
        .sidebar, .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>左侧边栏</h2>
            <p>左侧边栏内容</p>
        </div>
        <div class="content">
            <h1>主要内容区域</h1>
            <p>主要内容</p>
        </div>
    </div>
</body>
</html>

Copy after login

The above code is a simple left and right sidebar layout example. We arrange the child elements in the horizontal direction by setting the display: flex; and flex-direction: row; of the container.

width: 20%; of the left sidebar and width: 80%; of the right content area control the proportion of the two in the horizontal direction. That is, the left column occupies 20% of the width and the content area occupies 80% of the width.

By setting the flex-grow: 1; of the left sidebar and the flex-grow: 3; of the right content area, we implement the left and right sidebars adaptive. This means that the left sidebar will take up 1/4 of the available space, and the right content area will take up 3/4 of the available space.

Conclusion:
It is relatively simple to implement the adaptive layout of the left and right sidebars through Css Flex elastic layout. We only need to set the parent container to a flex container and use the relevant properties of flex to control the layout of the child elements. Sorting, alignment, and proportion of space taken up. This article gives a specific code example for readers to refer to and learn from. Hope this article is helpful to you!

The above is the detailed content of How to achieve adaptive left and right sidebars through CSS Flex layout. For more information, please follow other related articles on the PHP Chinese website!