HTML5彈性布局是用來為盒狀模型提供最大的靈活性，優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個布局效果。任何一個容器都可以指定為Flex彈性布局。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

彈性布局( Flexible Box 或 flexbox)，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。

flex布局優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個布局效果。

缺點(diǎn)是：瀏覽器兼容性比較差，只能兼容到ie9及以上。

【推薦教程：CSS視頻教程】

彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內(nèi)包含了一個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。

彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。

以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右:

FLEX

.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;

}

彈性盒子常用屬性屬性描述flex-direction指定彈性容器中子元素排列方式

flex-wrap設(shè)置彈性盒子的子元素超出父容器時是否換行

flex-flowflex-direction 和 flex-wrap 的簡寫

align-items設(shè)置彈性盒子元素在側(cè)軸(縱軸)方向上的對齊方式

align-content修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對齊，而是設(shè)置行對齊

justify-content設(shè)置彈性盒子元素在主軸(橫軸)方向上的對齊方式

更多編程相關(guān)知識，請?jiān)L問：編程視頻！！

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html中前台布局特点,HTML5弹性布局有什么优点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。