How to implement two-column layout through CSS Flex layout
How to implement two-column layout through CSS Flex elastic layout
CSS Flex elastic layout is a modern layout technology that can simplify the process of web page layout and make the design and developers can easily create layouts that are flexible and adaptable to a variety of screen sizes. Among them, implementing a two-column layout is one of the common requirements in Flex layout. In this article, we will introduce how to use CSS Flex elastic layout to implement a simple two-column layout and provide specific code examples.
Using Flex Containers and Items
When using Flex layout, we need a parent container to wrap our layout content. This container is called a Flex container. Flex containers can be created by setting the display property to "flex" or "inline-flex". Specifically, we can create a Flex container through the following code:
<div class="container"> <!-- 布局的内容 --> </div>
Next, we need to create two children in the Flex container, which is our two-column layout. These subprojects are called Flex projects. In the Flex container, we can control the size and elasticity of each item by setting the flex property to "1" or other values. Specifically, we can create two Flex projects through the following code:
<div class="container">
<div class="item">
<!-- 左栏内容 -->
</div>
<div class="item">
<!-- 右栏内容 -->
</div>
</div>Set Flex Layout
In order to achieve a two-column layout, we need to set the relevant properties of the Flex container and project. First, we need to arrange the children in the Flex container horizontally. This can be achieved by setting the flex-direction property of the container to "row". Specifically, we can set the properties of the Flex container through the following code:
.container {
display: flex;
flex-direction: row;
}Next, we can control the space occupied by each item by setting the flex property of the item. Here, we can use relative units, such as "fr" (short for fractional flex-grow property), to determine the proportion occupied by the children. Specifically, we can set the properties of Flex items through the following code:
.item {
flex: 1;
}Here, we use flex: 1 to set the space occupied by each item to an equal proportion. If we want the left column to take up more space, we can adjust the flex value of the corresponding item. For example, for the left column, we can set the flex property to "2", and for the right column, we can set the flex property to "1".
Full code example
The following is a complete code example that shows how to use CSS Flex elastic layout to implement a simple two-column layout:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
padding: 20px;
}
.left {
background-color: #f1f1f1;
}
.right {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="container">
<div class="item left">
<!-- 左栏内容 -->
</div>
<div class="item right">
<!-- 右栏内容 -->
</div>
</div>
</body>
</html>In this example , we used a simple CSS style to set the background color of each item to distinguish the left and right columns. You can add additional styles to beautify your layout according to your needs.
Summary
By using CSS Flex elastic layout, we can easily implement a two-column layout. Simply set the display property of the Flex container to "flex", then set the flex-direction property to "row", and then set the flex property of the Flex item to the corresponding value to achieve a flexible and adaptive layout. The above is a simple example, you can adjust the code according to your needs and design. I hope this article will help you understand and use CSS Flex elastic layout!
The above is the detailed content of How to implement two-column layout through CSS Flex layout. For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Atom editor mac version download
The most popular open source editor
Dreamweaver Mac version
Visual web development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
