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