每当我们去进行前端页面布局时都会用到float、position、margin等一些属性，这些属性用起来略显麻烦，并且浏览器去进行渲染时会大大消耗性能
所以今天我们来谈谈最新的 flex布局，也叫弹性布局！
需要注意的是任何容器都可以指定为flex布局，但是在flex布局中float、clear、vertical-align都会失效。
主轴方向
flex容器分为x轴与y轴，x轴正方向默认从左至右，y轴正方向默认从上到下。
定义一个容器为弹性布局display:flex;主轴默认方向为左到右；
如果我们想去改变flex的默认方向，就需要用到flex-direction属性flex-direction有四个属性值，分别是row、row-reverse、column、column-reverse，分别为从左到右、从右到左、从上到下、从下到上！
立即学习“前端免费学习笔记（深入）”；
主轴方向的对齐方式
justify-content:flex-start则主轴为左对齐justify-content:flex-end 则主轴为右对齐justify-content:center 则主轴为居中justify-content:space-between则每个子项目之间等距离，前提是有剩余空间justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离
纵向单行对齐方式！
align-item:flex-start纵向从上到下align-item:flex-end纵向从下到上align-item:center纵向居中对齐align-item:baseline以基线对齐align-item:strech这是默认方式
子项目换行
flex-wrap:wrap超出父元素会换行flex-wrap:wrap-reverse反向换行flex-wrap:no wrap这是默认方式,不换行
纵向多行对齐方式！
align-content:flex-start上对齐align-content:flex-end下对齐align-content:center上下居中align-content:space-betweenalign-content:space-around
以上均是添加到父元素身上的属性
子项目的一些属性
order:0,定义子项目的排序位置，数值越小越靠前，默认为0flex-grow:0;定义子项目的放大比例，默认为0不放大flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值
以上三种属性可以简写，比如flex：1,1,1顺序如上
如有错误，欢迎大家指正，一起努力吧！
以上就是html最新的flex布局的理解 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545004.html
微信扫一扫 
支付宝扫一扫 
