預設情況下先顯示移動端，通過 @media 屬性適配螢幕變化
display: flex; (父元素)
flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出該如何顯示)
flex: flex-grow flex-shrink flex-basis; (子元素, 子元素該如何分配空間)
order: number; (子元素, 子元素的順序該如何排列)
在父元素上設定 display: flex 和 flex-wrap: wrap
通過 flex 來調整子元素上的空間分配(擴充套件、收縮比例和伸縮基準值)
通過 order 來調整子元素的顯示順序(把 .center 放在中間)
.box
.center
.left, .right
.left
.right
@media all and (min-width: 400px)
}@media all and (min-width: 800px)
.center
.left, .right
.left
.right
}
彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
left
right
更多專業前端知識，請上
【猿2048】www.mk2048.com
移動端優先的flex三欄布局的使用方法
felxbox布局是css3裡新出的乙個，它就是為了解決上述兩種方式的不足出現的，是比較完美的乙個。目前移動端的布局也都是用flexbox。這篇文章主要介紹了移動端優先的flex三欄布局的使用方法，感興趣的小夥伴們可以參考一下 預設情況下先顯示移動端，通過 media 屬性適配螢幕變化 使用flex...
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...