Web Front-end
CSS Tutorial
How to achieve adaptive left and right sidebars through CSS Flex layout
How to achieve adaptive left and right sidebars through CSS Flex layout
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>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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to configure content adaptive brightness on Windows 11
Apr 14, 2023 pm 12:37 PM
Adaptive brightness is a feature on Windows 11 computers that adjusts the brightness level of your screen based on the content being displayed or lighting conditions. Since some users are still getting used to Windows 11's new interface, Adaptive Brightness can't be easily found, and some even say the Adaptive Brightness feature is missing on Windows 11, so this tutorial will clear it all up. For example, if you're watching a YouTube video and the video suddenly shows a dark scene, Adaptive Brightness will make the screen brighter and increase the contrast level. This is different from auto-brightness, which is a screen setting that allows your computer, smartphone, or device to adjust brightness levels based on ambient lighting. There is a special one in the front camera
How to build an adaptive mobile interface with Vue?
Jun 27, 2023 am 11:05 AM
With the popularity of mobile Internet, more and more websites and applications need to consider the mobile experience. As a popular front-end framework, Vue has responsive layout and adaptive capabilities, which can well help us build adaptive mobile interfaces. This article will introduce how to use Vue to build an adaptive mobile interface. Using rem instead of px as the unit and using px as the unit in the mobile interface may result in inconsistent display effects on different devices. Therefore, it is recommended to use rem instead of px as the unit. rem is relative
How to implement adaptive image size using CSS Viewport units vmin and vw
Sep 13, 2023 am 08:18 AM
How to use CSSViewport units vmin and vw to implement adaptive image size. In web design, we often encounter situations where images need to adapt to the screen size. To achieve this goal, CSS provides a powerful unit - the viewport unit. Among them, vmin represents the percentage of the smaller side of the viewport width, and vw represents the percentage of the viewport width. Therefore, we can use these two units to achieve the effect of adaptive image size. The specifics will be introduced below
Can vue be adaptive?
Dec 30, 2022 pm 03:25 PM
Vue can achieve self-adaptation. The methods to achieve self-adaptation are: 1. Install the "scale-box" component through the "npm install" or "yarn add" command, and use "scale-box" to achieve adaptive scaling; 2. Through Set the device pixel ratio to achieve self-adaptation; 3. Set the zoom attribute through JS to adjust the zoom ratio to achieve self-adaptation.
CSS Viewport: How to use vmax and vw to implement adaptive text width
Sep 13, 2023 am 10:16 AM
CSSViewport: How to use vmax and vw to implement adaptive text width. With the popularity of mobile devices, responsive design has become an important concept in web design. Among them, adaptive text width to maintain consistent display effects under different screen sizes is an important technology. This article will introduce how to use CSSViewport units, especially vmax and vw units, to implement adaptive text width. In addition to theoretical explanations, we will also provide specific
Detailed explanation of common problems and solutions in CSS Flex flexible layout
Sep 26, 2023 pm 01:19 PM
Detailed explanation of common problems and solutions in CSSFlex elastic layout Introduction: CSSFlex elastic layout is a modern layout method with elegant and concise syntax and powerful flexibility, and is widely used to build responsive web pages. However, in practical applications, some common problems are often encountered, such as elements being arranged not as expected, sizes being inconsistent, etc. This article will introduce these problems in detail and provide corresponding solutions. The code examples are as follows. 1. The arrangement of elements is not as expected. Problem description: When using Flex
Adaptive Server in PHP8.0
May 14, 2023 pm 01:10 PM
On November 26, 2020, the PHP team officially released the PHP 8.0 version. Compared with the previous version, PHP 8.0 brings many new features and improvements. One of the features worthy of attention is the adaptive server. This article will introduce the concept of adaptive server in PHP8.0 and its advantages. In previous PHP versions, developers could use PHP's own server (such as PHP-FPM, Apache) to run their own code. However, the disadvantages of these servers
How to create a responsive website layout using HTML, CSS and jQuery
Oct 27, 2023 am 11:06 AM
How to create an adaptive website layout using HTML, CSS, and jQuery In today’s Internet age, adaptive layout of websites has become an essential requirement. The adaptive layout of the website can enable the website to display a good user experience on different devices and adapt to devices of different screen sizes, such as computers, tablets, and mobile phones. This article will introduce how to use HTML, CSS and jQuery to create a responsive website layout, and provide specific code examples. Create website skeleton using HTML
