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

Home

Web Front-end

CSS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 26, 2023 am 10:57 AM

Adaptivecss flex flexible layoutleft and right sidebars

如何通过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 id="左侧边栏">左侧边栏</h2>
            <p>左侧边栏内容</p>
        </div>
        <div class="content">
            <h1 id="主要内容区域">主要内容区域</h1>
            <p>主要内容</p>
        </div>
    </div>
</body>
</html>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles