flex布局和傳統(tǒng)的布局有什么不同?
傳統(tǒng)布局:基于盒模型,依賴 display屬性 、position屬性 、float屬性;
flex布局:flex 是 flexible Box 的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。
(推薦教程:css快速入門)
設(shè)為display:flex的元素稱為"容器",它的子元素稱為"項目"。需要注意的是,容器設(shè)為 flex 布局以后,子元素的float、clear和vertical-align屬性將失效;
為什么要確定主軸和側(cè)軸?
主軸和側(cè)軸是通過flex-direction確定的(默認(rèn)是row) 之所以要確定主軸,是因為要確定項目的對齊方向:
如果flex-direction是row或者row-reverse,那么主軸就是justify-content;
如果flex-direction是column或者column-reverse,那么主軸就是align-items.