前一篇介紹了Flexbox的各個屬性直接的區(qū)別娃循,主軸和側(cè)軸直接的區(qū)別。接下來講解一下窖剑,F(xiàn)loxbox如何使用的一些小的demo.
一坚洽、? 布局樣式的屬性:
alignItems
alignSelf
borderBottomWidth
bvborderLeftWidth
borderRightWidth
borderTopWidth
bottom
flex
flexDirection
flexWrap
justifyContent
margin
marginBottom
marginHorizontal
maxHeight 最大高 使用邏輯相位單位 不能使用百分比 EMS 或者任何
padding?
position 位置 有相對位置和絕對位置。
zIndex 用來設(shè)置那些組件在他人之上顯示控件西土。通常情況下讶舰,你不使用zIndex。組件根據(jù)其在文檔樹順序呈現(xiàn)翠储,所以后來組件繪制于前面的绘雁。zIndex可能是有用的,如果你有援所,你不希望這種行為的動畫或自定義模式的接口庐舟。
二、 ?屬性使用小demo
2.1 ?獲取當前屏幕的寬度住拭、高度挪略、分辨率
運行結(jié)果:
2.1? 相對位置和絕對位置
和css的布局不同的是, 元素容器不用設(shè)置position:'absolute|relative' .
運行結(jié)果:
結(jié)論:通常情況下設(shè)置position和absolute滔岳,定位的效果是一樣的杠娱,但是如果父組件設(shè)置了內(nèi)邊距,position會做出相應的定位改變谱煤,而absolute則不會摊求。
2.3 ?寬度的設(shè)置問題
運行結(jié)果:
注意:容器需要添加flexDirection才能讓子元素flex;
結(jié)論:flex的元素如果不設(shè)置寬度, 都會百分之百的占滿父容器刘离。
2.4 ?水平垂直居中
運行結(jié)果: