彈性布局總結

2022-03-08 05:27:47 字數 1645 閱讀 4883

彈性布局對於移動端頁面開發其實還是蠻重要的,今天來一些總結吧

flexbox 為display屬性賦予了乙個新的值(即box 值), flexbox的屬性有很多,記錄一些比較常用的屬性:

display:box; 該屬性會將此元素及其直系子代加入彈性框模型中。(flexbox 模型只適用於直系子代)

box-orient:horizontal|vertical|inherit;該屬性定義父元素的子元素是如何排列的。

box-pack:start|end|center|justify;設定沿box-orient軸的父元素中子元素的排列方式。因此,如果box-orient是水平方向,則父元素的子元素是水平的排列方式,反之亦然。(表示父容器裡面子容器的水平對齊方式--垂直排列時--定寬)

box-align:start|end|center|baseline|stretch;基本上而言是box-pack的同級屬性。設定框的子代在框中的排列方式。如果方向是水平的,該屬性就會決定垂直排列,反之亦然。(表示父容器裡面子容器的垂直對齊方式--水平排列時--定高)

box-flex: 0 | 任意數字;該屬性讓子容器針對父容器的寬度按一定規則進行劃分。

其中 box-pack屬性 目前有很多瀏覽器還是不支援的 。

首先頁面的布局 要看每個子元素的 長度和寬度啊 ,要了解 ,而且要理解一下 以上屬性的意思,要不然 ,就會出現,明明我設定了 這個屬性,但是怎麼還不出來的情況呢?

因為一般情況下,預設是水平排列,而且子元素也沒有設定為固定寬度的,所以按照彈性布局的原理,

按照比例分配,如果其中有個子盒子是固定寬度的,剩餘的按照比例分配,這個時候有個問題就是。

有的時候並不是按照**中的比例分配,原因是 需要在固定寬度的地方設定乙個屬性就可以解決問題 ,

這個屬性是:box-sizing:border-box;   這個屬性很重要。

123

123

彈性布局(flex)總結

flex direction row row reverse column column reverse row 從左到右 預設 row reverse 從右到左 column 從上到下 column reverse 從下到上 nowrap 不換行,佔滿一行會被擠小 預設 wrap 換行 wrap ...

前端彈性布局總結

如何開啟彈性布局 開啟彈性布局的標籤即為 容器 box 容器具有是屬性flex direction 決定主軸的方向 flex wrap 容器排布在一條線 軸線 上,當排布滿的是否換行 flex flow 是flex direction屬性和flex wrap屬性的簡寫形式,預設值為row nowra...

Flex彈性布局總結

一 在容器box上設定的屬性 二 在item專案上設定的屬性 一 在容器box上設定的屬性 前提 display flex 或display inline flex 注意 容器設為flex布局以後,子元素item的float clear和vertical align屬性將失效。item專案的排列方向...