最新文章
flex彈性盒子理解與使用
在移動(dòng)網(wǎng)站開(kāi)發(fā)中,特別流行的布局方式之一,就是用flex彈性盒子布局,接下來(lái)就由石家莊網(wǎng)站建設(shè)工程師為大家詳細(xì)介紹。
Flexbox Layout,俗稱Flexible box模型,由W3C于2009年開(kāi)始起草的css3布局樣式。它旨在提供一種更加有效的布局方式,控制父容器中子元素的布局,排列以及分布,甚至在它們的尺寸未知或動(dòng)態(tài)變化的情況下,都能夠做到正確的展現(xiàn)(彈性盒子中的flex也由此而得名)。
彈性盒子的核心概念是父容器擁有能夠改變其子元素的的寬度/高度和排列順序,使得子元素能夠以最佳的尺寸填充整個(gè)父容器的可用空間。簡(jiǎn)單來(lái)說(shuō),一個(gè)彈性盒子能夠充分?jǐn)U展它的子元素尺寸使其填滿自身的可用空間,或者收縮子元素來(lái)防止溢出。
最重要的一點(diǎn)是,相對(duì)于傳統(tǒng)的塊布局block以及行布局inline來(lái)說(shuō),彈性盒子模型是方向不可知的(direction-agnostic)。盡管塊布局以及行布局能夠很好的滿足頁(yè)面布局,但是它們?nèi)狈椥?,不能很好地支持大型或者是?fù)雜的應(yīng)用(特別在屏幕進(jìn)行橫豎屏切換,改變視圖尺寸,延伸,收縮等等復(fù)雜情景下)。
注意:彈性盒子布局適合作用在一個(gè)應(yīng)用的組件和小范圍的布局,例如,一個(gè)歌曲列表,一個(gè)導(dǎo)航條,等等。相對(duì)的,Grid layout,即柵格布局則傾向于進(jìn)行大規(guī)模的界面布局,例如,整體界面的分欄布局,左右結(jié)構(gòu),上下結(jié)構(gòu),等等
Flex布局實(shí)現(xiàn)垂直與水平居中:
以上關(guān)于flex彈性盒子理解與使用均屬石家莊網(wǎng)站建設(shè)工程師的個(gè)人觀點(diǎn),大家如果對(duì)此有著不同的見(jiàn)解,可以關(guān)注公眾號(hào)“尚武科技派”給我留言,大家可以交流一下自己的心德體會(huì),共同學(xué)習(xí)進(jìn)步。