資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 將 flexbox 列左對齊和右對齊？
要使用 flexbox 和 CSS 將列左對齊和右對齊，我們可以使用各種 flexbox 屬性。在本文中，我們將學習並理解三種不同的方法來解釋如何使用 CSS 將 flexbox 列左對齊和右對齊。
我們使用 div 和 flexbox 建立了兩個靈活的列，我們的任務是使用 CSS 將靈活的列左對齊和右對齊。
將 flexbox 列左對齊和右對齊的方法
以下是本文將討論的使用 CSS 將 flexbox 列左對齊和右對齊的方法列表，其中包含分步說明和完整的示例程式碼。
使用 align-Content 對齊 flexbox 列
為了使用 CSS 將 flexbox 列左對齊和右對齊，我們使用了 CSS align-Content 屬性。
- 我們使用了 "display: flex;" 來建立一個 flexbox，這使得它的子元素成為 flex 專案。
- 為了將 flexbox 列左對齊，我們使用了 start 類選擇器和 "align-content: flex-start;"，它將內容對齊到 flex 容器的起始位置，使其左對齊。
- 為了將 flexbox 列右對齊，我們使用了 end 類選擇器和 "align-content: flex-end;"，它將內容對齊到 flex 容器的末尾，使其右對齊。
- 為了將 flexbox 列左對齊和右對齊，我們使用了 between 類選擇器和 "align-content: space-between;"，它將內容左對齊和右對齊。
示例
這是一個完整的示例程式碼，實現了上述步驟，以將 flexbox 列左對齊和右對齊。
<!DOCTYPE html>
<html>
<head>
<title>
Align flexbox columns left and right using CSS
</title>
<style>
.container {
display: flex;
height: 200px;
width: 100%;
flex-flow: column wrap;
}
.start {
align-content: flex-start;
}
.end {
align-content: flex-end;
}
.between {
align-content: space-between;
}
.item {
flex-basis: 15%;
background-color: #04af2f;
color: white;
margin: 2px;
text-align: center;
letter-spacing: 1px;
border: 1px solid white
}
.para {
text-align:center;
border: 1px solid black;
background-color: #2b0240;
color:white;
}
</style>
</head>
<body>
<h3>
To align flexbox columns left and right
using CSS
</h3>
<p>
In this example we have used
<strong>align-content</strong> property
to align flexbox columns to left,right
and left & right using CSS.
</p>
<p class="para">
Aligning flex Columns to left.
</p>
<div class="container start">
<div class="item"> Column 1 </div>
<div class="item"> Column 2 </div>
<div class="item"> Column 3 </div>
<div class="item"> Column 4 </div>
<div class="item"> Column 5 </div>
<div class="item"> Column 6 </div>
<div class="item"> Column 7 </div>
<div class="item"> Column 8 </div>
<div class="item"> Column 9 </div>
<div class="item"> Column 10 </div>
</div>
<P class="para">
Aligning flex Columns to right.
</P>
<div class="container end">
<div class="item"> Column 1 </div>
<div class="item"> Column 2 </div>
<div class="item"> Column 3 </div>
<div class="item"> Column 4 </div>
<div class="item"> Column 5 </div>
<div class="item"> Column 6 </div>
<div class="item"> Column 7 </div>
<div class="item"> Column 8 </div>
<div class="item"> Column 9 </div>
<div class="item"> Column 10 </div>
</div>
<P class="para">
Aligning flex Columns to left & right.
</P>
<div class="container between">
<div class="item"> Column 1 </div>
<div class="item"> Column 2 </div>
<div class="item"> Column 3 </div>
<div class="item"> Column 4 </div>
<div class="item"> Column 5 </div>
<div class="item"> Column 6 </div>
<div class="item"> Column 7 </div>
<div class="item"> Column 8 </div>
<div class="item"> Column 9 </div>
<div class="item"> Column 10 </div>
</div>
</body>
</html>
使用 justify-content 對齊 flexbox 列
在這種方法中，我們使用了 CSS justify-content 屬性來將 flexbox 列左對齊和右對齊。當專案沒有使用所有可用空間時，它會水平對齊 flex 專案。
- 我們使用了 "display: flex;" 來建立一個 flexbox，這使得它的子元素成為 flex 專案。
- 為了將 flexbox 列左對齊，我們使用了 start 類選擇器和 "justify-content: flex-start;"，它將 flex 專案定位在 flex 容器的起始位置，使其左對齊。
- 為了將 flexbox 列右對齊，我們使用了 end 類選擇器和 "justify-content: flex-end;"，它將 flex 專案定位在 flex 容器的末尾，使其右對齊。
- 為了將 flexbox 列左對齊和右對齊，我們使用了 between 類選擇器和 "justify-content: space-between;"，它將內容左對齊和右對齊。
示例
這是一個完整的示例程式碼，實現了上述步驟，以將 flexbox 列左對齊和右對齊。
<!DOCTYPE html>
<html>
<head>
<title>
Align flexbox columns left and right using CSS
</title>
<style>
.container {
display: flex;
}
.start {
justify-content: flex-start;
}
.end {
justify-content: flex-end;
}
.between {
justify-content: space-between;
}
.item {
height:100px;
background-color: #04af2f;
color: white;
margin: 2px;
text-align: center;
letter-spacing: 1px;
border: 1px solid black;
}
.para {
text-align:center;
border: 1px solid black;
background-color: #2b0240;
color:white;
}
</style>
</head>
<body>
<h3>
To align flexbox columns left and right
using CSS
</h3>
<p>
In this example we have used
<strong>justify-content</strong> property
to align flexbox columns to left, right
and left & right using CSS.
</p>
<p class="para">
Aligning flex Columns to left.
</p>
<div class="container start">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>
<p class="para">
Aligning flex Columns to right.
</p>
<div class="container end">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>
<p class="para">
Aligning flex Columns to left & right.
</p>
<div class="container between">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>
</body>
</html>
使用 margin 對齊 flexbox 列
在這種方法中，我們使用了 CSS margin 屬性來將 flexbox 列左對齊和右對齊。
- 我們使用了 "display: flex;" 來建立一個 flexbox，這使得它的子元素成為 flex 專案。
- 為了將 flexbox 列左對齊，我們使用了 right 類選擇器和 "margin-right: auto;"，它設定右外邊距，佔用右側所有可用空間，使 flex 列左對齊。
- 為了將 flexbox 列右對齊，我們使用了 left 類選擇器和 "margin-left: auto;"，它設定左外邊距，佔用左側所有可用空間，使 flex 列右對齊。
- 為了將 flexbox 列左對齊和右對齊，我們使用了 endLeft 類選擇器和 "margin-right: auto;"，它將內容左對齊和右對齊。
示例
<!DOCTYPE html>
<html>
<head>
<title>
Align flexbox columns left and right using CSS
</title>
<style>
.container {
display: flex;
}
.box {
height: 200px;
background-color: #04af2f;
color: white;
border: 1px solid white
}
.right {
margin-right: auto;
}
.left {
margin-left: auto;
}
.endLeft {
margin-right: auto;
}
.para {
text-align: center;
border: 1px solid black;
background-color: #2b0240;
color: white;
}
</style>
</head>
<body>
<h3>
To align flexbox columns left and right
using CSS
</h3>
<p>
In this example we have used
<strong>margin</strong> property to align
flexbox columns to left using CSS.
</p>
<p class="para">
Aligning flex Columns to left.
</p>
<div class="container">
<div class="box">Left Column</div>
<div class="right box">Right Column</div>
</div>
<P class="para">
Aligning flex Columns to right.
</P>
<div class="container">
<div class="left box">Left Column</div>
<div class="box">Right Column</div>
</div>
<P class="para">
Aligning flex Columns to left & right.
</P>
<div class="container">
<div class="endLeft box">Left Column</div>
<div class="endRight box">Right Column</div>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 將 flexbox 列左對齊和右對齊。我們討論了三種不同的方法：使用 align-Content 屬性、justify-Content 屬性和使用 margin 屬性。我們可以使用上述三種方法中的任何一種。
更新於：2024年7月23日
20K+ 次瀏覽
廣告