溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在Flexbox布局模塊之前，有四種布局模式：
塊（block），用于網頁中的部分
內聯（inline），用于文本
表（table），用于二維表數據
定位（position），用于元素的顯式位置
Flexbox布局模塊，可以更輕松地設計靈活的響應式布局結構，而無需使用浮動或定位。
注意兼容問題：
webkit內核瀏覽器應使用前綴-webkit
IE瀏覽器，可以很好的兼容IE11+版本，對于IE10只有部分可以兼容，且使用時需增加-ms，IE10瀏覽器中容器定義成彈性伸縮盒時，需使用display: -ms-flexbox
要開始使用Flexbox模型，您需要先定義一個Flex容器。
1
2
3
上面的元素表示一個包含三個flex項目的flex容器(藍色區域)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox</title>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>flex布局必須有一個父元素，其display屬性設置為flex。</p>
<p>flex容器的直接子元素自動成為flex項。</p>
</body>
</html>通過將display屬性設置為flex，Flex容器變得靈活：
.flex-container {
display: flex;
}##Flex容器屬性有：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性
##flex-direction屬性定義容器要在哪個方向上堆疊彈性項目。
1
2
3
上面的元素表示一個包含三個flex項目的flex容器(藍色區域)。 column值堆疊（但從頂部到底部）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h2> flex-direction 屬性</h2>
<p> "flex-direction: column;" 垂直堆疊flex項目(從上到下):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>column-reverse值堆疊（但從底部到頂部）：
.flex-container {
display: flex;
flex-direction: column-reverse;
}row值水平堆放（左到右）：
.flex-container {
display: flex;
flex-direction: row;
}row-reverse值水平堆放（但從右到左）:
.flex-container {
display: flex;
flex-direction: row-reverse;
}flex-wrap屬性指定flex項是否應該換行。下面的示例有12個fiex項目，以更好地展示flex-wrap屬性。
.flex-container {
display: flex;
flex-wrap: wrap;
}nowrap值指定Flex項目將不會換行（這是默認值）：
.flex-container {
display: flex;
flex-wrap: nowrap;
}wrap-reverse值將flex項目倒置：
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}flex-flow屬性是用于設置flex-direction和flex-wrap屬性的簡寫屬性。
.flex-container {
display: flex;
flex-flow: row wrap;
}##justify-content屬性
justify-content屬性用于對齊flex項：
1
2
3
center值中心對齊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h2> justify-content 屬性</h2>
<p> "justify-content: center;" 對齊容器中心的伸縮項目:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>使用Flex Box制作響應式網站和圖庫非常方便
| 屬性 | 描述 |
|---|---|
| display | 指定用于HTML元素的框的類型 |
| flex-direction | 指定flex容器中可伸縮項目的方向 |
| justify-content | 當項目不使用主軸上的所有可用空間時，水平對齊flex項目 |
| align-items | 當項目不使用橫軸上的所有可用空間時，垂直對齊flex項目 |
| flex-wrap | 指定是否應該包裝flex項(如果在一行上沒有足夠的空間容納它們) |
| align-content | 修改flex-wrap屬性的行為。它類似于對齊項，但是它不是對齊flex項，而是對齊flex行 |
| flex-flow | flex-direction和flex-wrap的簡寫屬性 |
| order | 指定一個flex項相對于同一容器內其他flex項的順序 |
| align-self | 用于flex項目。覆蓋容器的align-items屬性 |
| flex | flex-growth、flex-shrink和flex-base屬性的簡寫屬性 |
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
