在移動(dòng)網(wǎng)站開發(fā)中，特別流行的布局方式之一，就是用flex彈性盒子布局，接下來就由石家莊網(wǎng)站建設(shè)工程師為大家詳細(xì)介紹。

　　Flexbox Layout，俗稱Flexible box模型，由W3C于2009年開始起草的css3布局樣式。它旨在提供一種更加有效的布局方式，控制父容器中子元素的布局，排列以及分布，甚至在它們的尺寸未知或動(dòng)態(tài)變化的情況下，都能夠做到正確的展現(xiàn)(彈性盒子中的flex也由此而得名)。

　　彈性盒子的核心概念是父容器擁有能夠改變其子元素的的寬度/高度和排列順序，使得子元素能夠以最佳的尺寸填充整個(gè)父容器的可用空間。簡(jiǎn)單來說，一個(gè)彈性盒子能夠充分?jǐn)U展它的子元素尺寸使其填滿自身的可用空間，或者收縮子元素來防止溢出。

　　最重要的一點(diǎn)是，相對(duì)于傳統(tǒng)的塊布局block以及行布局inline來說，彈性盒子模型是方向不可知的(direction-agnostic)。盡管塊布局以及行布局能夠很好的滿足頁面布局，但是它們?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ì)此有著不同的見解，可以關(guān)注公眾號(hào)“尚武科技派”給我留言，大家可以交流一下自己的心德體會(huì)，共同學(xué)習(xí)進(jìn)步。