溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5彈性布局有哪些優(yōu)點，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
HTML5彈性布局是用來為盒狀模型提供最大的靈活性，優(yōu)點在于其容易上手，根據(jù)flex規(guī)則很容易達到某個布局效果。任何一個容器都可以指定為Flex彈性布局。
彈性布局（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
flex布局優(yōu)缺點：
優(yōu)點在于其容易上手，根據(jù)flex規(guī)則很容易達到某個布局效果。
缺點是：瀏覽器兼容性比較差，只能兼容到ie9及以上。
彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
以下元素展示了彈性子元素在一行內顯示，從左到右:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FLEX</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1200px;
height: 640px;
background-color: lightsteelblue;
}
.flex-container .flex-item {
width: 320px;
height: 240px;
margin: 10px;
background-color:lightsalmon;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
彈性盒子常用屬性
| 屬性 | 描述 |
|---|---|
| flex-direction | 指定彈性容器中子元素排列方式 |
| flex-wrap | 設置彈性盒子的子元素超出父容器時是否換行 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫 |
| align-items | 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式 |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊 |
| justify-content | 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式 |
感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5彈性布局有哪些優(yōu)點”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
