關於flex定位講解

2021-10-03 09:13:47 字數 1011 閱讀 3397

**

首先我們要知道flex是我們移動端常用布局,當然pc端也可以,接下來我們了解一下flex:

整體分為兩部分:

一般情況下語法新增在父容器,即display:flex

預設情況下,在彈性盒子元素中元素容器左右排列,即flex-direction:row

還有就是寫在子元素裡

接下來我們了解聽他的每乙個屬性

display:flex,這個屬性就是改變我們正常盒模型變成彈性盒模型

flex-direction: 這個屬性是用來子項的整體布局方向,預設值是row 從左到右排列,當值為column 這個代表列 從上到下排列

flex-war:warp 換行值,預設nowrap 不換行。

justify-content:決定主軸方向上子項對齊和分布方式,一般常用值space-around:就是每個flex兩側都環繞互不相干,spac-evenly:代表flex兩側空白間距相同,預設值是flex-start,子項都在起始位置對齊。

align-items,flex子項相對於flex容器在側軸相對方式,也可理解為flex垂直居中的方式,取值:center居中對齊 ,flex-end底對齊,flex-start,預設值子項拉伸。

align-content:這個值和justify-content相反的操作,並且最小需要兩行才能看出效果,值和justify-content相同。

注意:彈性布局的方式是做一維布局 ,網格適合做二維布局。

作用在子項的css屬性:

order

改變某個子項的位置,值越大,越靠後,預設值是0

flex-grow:擴充套件,注意要想看到擴充套件必須右空隙,當值為0就是不擴充套件 ,當值為1就是把空隙全占滿,.5佔空隙的一半,也可以理解相當於比例值,當值相同就將空隙等分。

flex-shrink:收縮,預設值為1,當為0時候就不收縮了,會溢位,沒有負數

flex-basis這個值和flex-shrink很像設定乙個具體值,若空間滿了就不會變大了。

逆戰2020.3.1

Flex布局講解

彈性盒模型 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box或flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性...

FLEX特效的講解

flex的行為機制使得開發者可以很方便地為應用程式新增動畫效果,從而使使用者介面更加豐富多彩。本章將介紹如何在flex應用程式中建立行為及動畫效果。9.1 什麼是行為 9.1.1 觸發器與效果 觸發器的使用非常簡單,可以作為mxml標記中的乙個屬性,也可以在標記中呼叫,或者在actionscript...

Flex的定位和布局

flex flash,flex2,flex3 ggnet 03月 9th.2008,6 59pm 在乙個 flex 程式中,有三種方法來定位你的元件。使用自動定位 使用絕對定位 使用基於約束的布局 1.自動定位 layout 可能的值為 horizontal vertical 和 absolute ...