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!
The Slideout FooterApr 09, 2025 am 11:50 AMA fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The
Pages for LikesApr 09, 2025 am 11:47 AMI posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it.
Recreating the CodePen Gutenberg Embed Block for Sanity.ioApr 09, 2025 am 11:43 AMLearn how to create a custom CodePen block with a preview for Sanity Studio, inspired by Chris Coyier’s implementation for Wordpress’ Gutenberg editor.
How to Make a Line Chart With CSSApr 09, 2025 am 11:36 AMLine, bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG
Programming Sass to Create Accessible Color CombinationsApr 09, 2025 am 11:30 AMWe are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
How We Created a Static Site That Generates Tartan Patterns in SVGApr 09, 2025 am 11:29 AMTartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
A Follow-Up to PHP TemplatingApr 09, 2025 am 11:14 AMNot long ago, I posted about PHP templating in just PHP (which is basically HEREDOC syntax). I'm literally using that technique for some super basic
Creating a Modal Image Gallery With Bootstrap ComponentsApr 09, 2025 am 11:10 AMHave you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos?
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
WebStorm Mac version
Useful JavaScript development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 Linux new version
SublimeText3 Linux latest version
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
