您的位置:首页> 日志> 前端技术 正文
DTOP

Flex布局解析

alin | 2020年09月09日 |

>>收藏本文 已有 0条评论

今天跟大家分享下css 中的 flex布局。

 

什么是Flex布局?

flex布局是继标准流布局、浮动布局、定位布局后的一种新的布局方式。

这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗

口缩放自动适应。

 

flex布局在浏览器存在一定的兼容性问题。可以兼容以下版本chrome 21 +、Opera 12.1+、Firefox 22+、Safari6.1+、IE10+ 。在pc上因为要兼容IE10以上,还有一点市场份额。但在手机上就可以大胆的运用了。

 

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

 

开启flex属性后,子元素会从左往右排列,同时flaot属性将失效。

 

justify-content:flex-end  子元素右对齐

 

justify-content:space-between  子元素两端对齐,且中间元素水平均匀分布,这个在实际运用中很多,在标准流布局中一不小心就使得元素益出换行,这个space-between就可以完美解决。

 

justify-content:center  子元素居中对齐

 

justify-content:space-around  子元素的外边距相等居中对齐,中间间距为两端间距的两倍。

 

justify-content:space-evenly  子元素的外边距相等居中对齐, 这种布局在手机app上的图标导航使用很广泛。

 

align-items:center; 子元素上下居中,左对齐。

align-items:flex-end; 子元素底部左对齐。

 

align-items:center;justily-content:space-evenly;子元素上下垂直居中且均匀分布。这个使用也很多。

 

flex-direction:row-reverse; 子元素行向分布,倒序。

 

flex-direction:Column; 子元素竖向分布,倒序。

 

flex-wrap:nowrap; 子元素强行被平均分配,即使给子元素设定了宽度,也无效。

 

flex-wrap:nowrap; 子素相加的宽度超加了容器时,超出的子元素将换行。

 

给每个子元素设定一个order值,数值越小,项目越靠前。

 

align-self:center; 可单独给指定子元素设置居中分布。

所有元素的flex-grow属性都为1,则它们将等分剩余空间。

 

如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4个子元素中,两个是固定不变,另两个的flex-grow均为1时;那剩余空间等分配

 

4个子元素中,两个是固定不变,另两个的flex-grow分别为2和1,那剩余空间将以2:1比例分配

 总结:flex布局,可以完美的解决元素在横向及竖向的排序问题。特别适用于响应式布局的项目。更多属性可以自己再实践一下加深理解。