資料結構
網路
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+ 次瀏覽
廣告