Flex布局与传统布局对比
网页布局主要包括全屏布局,水平居中,垂直居中和sticky Footer布局。
一、布局的传统解决方案是基于盒状模型,依赖display+position+float方式来实现,灵活性较差,比如:垂直居中不容易实现。(盒状模型是由margin、padding、border和content几个属性组合形成的。)
二、2009年,W3C提出了一种新的方案-Flex(Flexible Box)弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局,可以简便、完整、响应式地实现各种页面布局。
Flex布局原理
通过给父盒子添加flex属性,来控制盒子的位置和排列方式
display:flex;
注:当父盒子被设为flex布局后,子元素的float、clear和vertical-align属性都会失效
父级元素flex布局常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素的排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
子元素flex布局常见属性
flex:子元素占的份数(默认为0)
子元素的flex属性:表示占剩余空间的分数
如:css布局中的圣杯布局、双飞翼布局(两边盒子固定,中间部分自适应),可使用flex布局来处理剩余空间的份数
align-self:控制子元素自己在侧轴上的排列方式
order:控制子元素的排列顺序
更多推荐:
前端布局方式总结:https://juejin.cn/post/7005557017716883470