数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会研究
时尚研究
法律研究如何使用 CSS Flex 创建容器的左右对齐？
对于 flex，我们可以轻松创建容器的左右对齐。使用 flex-direction 属性，以水平方式显示灵活的项目。由于 justify-content 设置为 space-between，因此灵活的项目之间有空格。以下示例说明了 CSS flex 属性。
与 Flex 方向对齐
使用 display 属性，将 div 容器设置为 flex 值。flex-direction 允许 flex 项目以水平方式显示 −
flex-direction: row;
示例
让我们看一看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 2%;
padding: 15%;
align-self: center;
background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=stretch&w=600&q=80");
color: white;
}
div > div {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<div>Left</div>
<div>Right</div>
</div>
</body>
</html>
使用 Flex 布局对齐
若要使用 flex 流对齐，你需要知道 flex-flow 是 flex-direction 和 flex-wrap 的组合。flex-direction 用于设置 flex 项目的方向，而 flex-wrap 设置 flex 项目是否换行。
此处，flex-flow 的值为 column wrap，即使用 flex-direction 以纵向显示项目，并使用值 wrap 进行换行 −
flex-flow: column wrap;
示例
让我们看一看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
height: 250px;
display: flex;
flex-flow: column wrap;
padding: 2%;
background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0;
}
img {
margin: 2%;
width: 60px;
border-radius: 25%;
}
</style>
</head>
<body>
<div id="container">
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
</div>
</body>
</html>
更新时间： 2023 年 12 月 14 日
1K+ 次浏览
广告