HTML5彈性布局是用來為盒狀模型提供最大的靈活性，優點在于其容易上手，根據flex規則很容易達到某個布局效果。任何一個容器都可以指定為Flex彈性布局。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

彈性布局( Flexible Box 或 flexbox)，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

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

flex布局優缺點：

優點在于其容易上手，根據flex規則很容易達到某個布局效果。

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

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

彈性盒子內容

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

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

彈性容器內包含了一個或多個彈性子元素。

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

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

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

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設置彈性盒子的子元素超出父容器時是否換行

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

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

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

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

更多編程相關知識，請訪問：編程視頻！！

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。