CSS3中的flexbox

LoftySoul 發布于2019-08-30 12:54 / 2911人閱讀

摘要：中的給布局帶來了許多方便。布局主要分為兩個部分以外的地方和中的內容不受影響，按正常的方式進行布局。所以，項目之間的間隔比項目與邊框的間隔大一倍。若設置該屬性為，則此元素在父元素空間不足時仍保持自己的寬度。

css3中的flexbox給布局帶來了許多方便。下面我們就簡單的講一講它的用法以及適用的地方。

flexbox布局主要分為兩個部分：

flex-container

flex-item

flex-container以外的地方和flex-item中的內容不受影響，按正常的方式進行布局。

現在讓我們分別看一看父容器和子元素的一些屬性。

父容器的屬性

display: flex | inline-flex
父元素設置flex或者inline-flex屬性之后，其所有的直接子元素自動升級為容器成員，子元素的float，position屬性失效。

flex-direction: row | row-reverse | column | column-reverse
用來設置flex-item的排列方式，row為默認選項，由容器x軸開始從左往右進行排列，其他三個選型以此類推。

flex-wrap: nowrap | wrap | wrap-reverse
三個值分別代表換行，不換行，不換行且反方向排列。

justify-content: flex-start | flex-end | center | space-between | space-around
該值有5個屬性，假設布局從左往右，這五個值分別代表：左對齊，右對齊，居中，兩端對齊，項目之間的間隔都相等，每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch
指定在y軸上如何對齊

align-content
該屬性在有多根軸線的情況下適用？

子元素（flex-item）的屬性

order:
該屬性可以調整子元素的順序。數值越小，排列越靠前，默認情況為0。我們可以通過設置順序較為后面的元素的order屬性為-1來將其前置。

flex-grow:
設置通過什么樣的方式分割容器剩余部分的空間。
flex-grow默認值為0，不分取任何剩余空間。
若父容器中有三個flex-item，他們的flex-flow值為1，則三者按照1:1:1的比例等分剩余空間；若它們的flex-flow的值分別為1,2,3，則三者分別分取剩余空間的1/6,2/6,3/6.

flex-shrink:
默認值為1，表示該元素會隨著父容器空間的不足而縮小自己。若設置該屬性為0，則此元素在父元素空間不足時仍保持自己的寬度。

flex-baisis: | auto

flex: flex-flow[,flex-basis]
綜合flex-flow, flex-shrink和flex-basis

瀏覽器的兼容問題：

目前各瀏覽器的最新版本都實現了flexbox布局，但是兼容瀏覽器的不同版本仍然是一項巨大的工程啊TT

GPU云服務器云服務器 flexbox FlexBox詳解 flexbox容器 css3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/115158.html

前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也經歷了一段演變歷史。不同于將要出現的網格布局針對目標為大比例布局，彈性盒布局更適用于應用組件和小比例布局。常規布局是基于塊和內聯流方向，而布局是基于流。前言你還在用display+position+float來進行css布局嗎？有沒有覺得用傳統的這種布局方法來實現特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

andycall 2019-08-30 13:13 評論0 收藏0
CSS基礎篇--你知道的display的值有多少？用了多少？

摘要：與屬性的值不同，其不為被隱藏的對象保留其物理空間指定對象為內聯元素。指定對象作為塊元素級的表格。類同于標簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更，僅供參考。它的語法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 評論0 收藏0