flex布局-學習

hedzr 發布于2019-08-29 11:16 / 2468人閱讀

摘要：今天上網找了下各種的博文學習了一番資料如下阮一峰的網絡日志年提出了布局特點是簡便完整響應式兼容性如下查詢鏈接介紹意思為彈性布局任何一容器都可以指定為布局甚至行內元素也可以但是由于支持的情況各不相同我們還是需要對屬性做兼容性處理如加上

今天,上網找了下各種flex的博文學習了一番,資料如下:
阮一峰的網絡日志
Dive into Flexbox
2009年,W3C提出了---Flex布局,特點是

簡便

完整

響應式

兼容性如下
查詢鏈接

介紹

Flex(Flexible Box),意思為"彈性布局"
任何一容器都可以指定為Flex布局,甚至行內元素也可以

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

但是由于支持的情況各不相同,我們還是需要對屬性做兼容性處理如加上-webkit-前綴等.

失效特性

float

clear

vertical-align

理解

容器采用flex布局后,就被稱為flex容器(flex container),子元素被稱為容器成員,為flex項目(flex item)
對于flex布局其實理解下圖即可

容器中默認有兩根軸,主軸(main axis)和cross axis(交叉軸)
開始結束位置分別為main/cross start和main/cross end
排列的順序為main/cross direction.
flex item占據main axis上空間為main size,占據cross axis上的空間為cross size.

flex屬性 容器屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction
用于改變flex容器的軸線,默認值為row

row(default)

row-reverse(就和后綴一樣,為main axies反向排列)

column(改變軸線為cross axies,為cross axies方向排列)

column-reverse(同理改變軸線,cross axies方向反向排列)

justify-content
用于改變flex容器中flex item在軸線上的位置

flex-start(default,從axies start開始緊靠排列)

flex-end(axies end端緊靠排列)

center(展現如其名,axies中間)

space-between(相當于將空間等分,每份空間中flex-start排列)

space-around(空間等分,每份空間中center排列)

align-items
為justify-content的補充屬性,為flex item在非flex-direction指定的另一軸線的位置

flex-start(default)

flex-end

center
以上三種也就不贅述啦

stretch (如同屬性名一樣,將元素在軸向上伸展開來,注意在固定了height的情況下不會拉伸)

baseline (定位線為item中第一行文字的底部線,根據該線進行定位,也就是基線對齊,取距離start最長的基線對齊)
值得注意的是屬性值baseline,其基線的定義需要進一步了解

鏈接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基線定義會根據情況不同而變化,通常情況下為第一項的底線(文字底部/圖片底部),無內容的flex item為flex item底部border線.

flex-wrap
直到現在為止,每個Flex 容器只有一條Flex Line,使用flex-wrap,我們能創建一個擁有多條Flex Line的Flex 容器

nowrap(default)

wrap

wrap-reverse
設置為wrap時,假如我們一行空間不夠,我們的flex item在空間不足時會進行換行.創建新的一行.

設置為wrap-reverse時,在wrap換行效果的同時,將會反向展現

align-content
該屬性定義了flex-wrap的行為,這和align-item有點相似,但是和其不同的是該屬性align的是Flex Line.

stretch(default)

flex-start

flex-end

center

space-between

space-around
看到他們其實大概就知道是怎么回事啦,這里也就不多說了,其實想象一下就知道了,主要是用于設置行/列位置的屬性

flex-flow
= flex-direction + flex-wrap
用于快速設置上述兩個屬性.

項目(item)屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

值得注意的屬性
margin
在flex布局中,margin:auto是一個很有用的屬性,設置后會自動吸收多余的空間,可以利用flex item的該屬性進行多樣化的布局.

order
設置元素的順序,數值越小,排列越前,默認為0

flex-grow
為放大比例,默認為0

flex-shrink
定義了縮小比例,默認為1,即如果空間不足,項目將會縮小
所有項目為1時,空間不足,都會縮小,如果你不希望某個容器在任何時候都不被壓縮，那設置flex-shrink:0;數值代表被縮小的程度
!負值無效者縮小

flex-basis
在分配多余空間前,項目占據的主軸的空間,瀏覽器將根據該屬性,計算主軸空間是否有多余空間.

auto(default)

設定為width/height一樣的值如50px,即固定項目占據的空間

flex
順序為 flex-grow flex-shrink flex-basis,默認為0 1 auto,后兩個屬性為可選選項
auto(1 1 auto)/none(0 0 auto)

align-self
用于覆蓋Flex容器中的align-items屬性,它有和align-items相同的屬性值

auto(繼承align-items屬性,無父元素則等同于stretch)

stretch

flex-start

flex-end

center

baseline

GPU云服務器云服務器 flex布局學習css布局 flex flex40

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111537.html

FlexBox學習彈性布局_019

摘要：學習彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發生，而不影響該空間分布的其他行。同時，布局空白對于元素的對齊行為也是很重要的。這會使該元素延展，并占據此方向軸上的布局空白。 FlexBox學習彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。一維...

warnerwu 2019-08-02 16:09 評論0 收藏0
FlexBox學習彈性布局_019

摘要：學習彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發生，而不影響該空間分布的其他行。同時，布局空白對于元素的對齊行為也是很重要的。這會使該元素延展，并占據此方向軸上的布局空白。 FlexBox學習彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。一維...

MyFaith 2019-08-30 15:43 評論0 收藏0
微信小程序開發必備必看常用的Flex布局模式－wxflex

摘要：首發地址微信小程序的布局種必備常用的布局模式代碼庫地址官方建議的布局的布局相比傳統的布局來說，簡單快捷方便。首發地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo－4種必備常用的Flex布局模式代碼庫 github地址：https://github.com/icindy/wxflex 官方建議的Flex布局 Fle...

jzzlee 2019-08-29 11:28 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0
學習關于display ：flex 布局問題！

摘要：什么是呢答是的縮寫，意為彈性布局這個東西的引入，為盒模型提供了最大的靈活性可以相應式的實現各種頁面的布局。基本概念采用布局的元素，稱為容器，簡稱容器。在這個容器中默認存在兩個軸水平方向的主軸和垂直方向上的交叉軸。很多人不明白這個display:flex是到底是什么東西，如何使用的。 1.什么是display：flex呢？答：flex是 flexible box的縮寫，意為彈性布局；...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0