頁面布局之flex布局

flex布局

flex布局也叫作彈性盒子布局，可以簡便、完整、響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為：display:flex。內容的位置用justify-content來控制，常用的屬性有：space-between、space-around、center、left 、right 。(注釋：類名為father的盒子中寫了4個類名為son的盒子)

一共有6個屬性是新增給父級的，分別有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

flex-direction用來決定主軸的方向，預設值為row，所以預設橫向排列。row|row-reserve|column|column-reserve。

flex-wrap來決定換行，nowrap不能換行；wrap換行，多餘的自動在左下方；wrap-reserve換行，多餘的自動在左上方，預設值為nowrap。

flex-flow

是flex-direction和flex-wrap的簡寫，預設值為row nowrap。

由於子級位置不居中，遂給父級新增：align-items:center，之後都是居中顯示。

在寫這些類似平均分布的樣子的時候，優先考慮彈性盒子布局，適應性強。

相關的詳細資訊可以查詢菜鳥教程（

前端頁面flex布局

布局方式 可伸縮給父級元素新增display flex，再給子元素新增flex 1 不加單位，表示該子元素佔1份 一般 配合min width和max width使用，如果不指定flex就不參與伸縮，可固定導航欄，讓兩邊伸縮 追加屬性flex direction column可以是子元素垂直排列 對...

前端布局之Flex布局

傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...

css布局之flex布局

網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...