弹性布局

1、弹性布局
横向排列:

单行:开启弹性布局:display:flex;  写在父盒子 (子盒子会跟父盒子进行伸缩)
子盒子内写 flex:份数   分父盒子的总大小
子盒子内写 flex-basis:px数   该子盒子固定分走px数(basis优先级比width属性高)

分行:

flex-wrap:wrap;  子盒子固定数值分配,不够就往下面行排
justify-content:flex-start(默认,左边);flex-end(往右边挤) center(往中间挤) space-round (平均分隔居中) space-between(平均分隔两边)  永远对主轴生效

垂直对齐

align-content:跟justify-content的一样  (这个属性只有多行才会生效)
align-items:flex-start(单行上面对齐)  flex-end(单行下面对齐)  center(单行中间对齐)    在单行使用较多(也支持多行)
align-self:flex-start(单个上面对齐)  flex-end(单个下面对齐)  center(单个中间对齐)

*排列方向:flex-direction:row(按行显示) column(按列显示) 设置哪个,哪个为主轴

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,...
    xiaotao123阅读 5,688评论 0 1
  • 最近难得有空,总结一下flex布局相关知识点,如有错漏,请大神指点纠正,谢谢~ flex布局总结: 快速记忆 主轴...
    JyLie阅读 3,923评论 0 1
  • flex主要用于响应式页面设计,兼容各种宽度的设备flex布局写法: 行内元素flex布局: webkit内核的浏...
    雨未浓阅读 5,872评论 0 0
  • 简介 传统布局基于盒子模型,通过 display float position 属性进行布局,但是有些效果在盒模型...
    kabumie阅读 5,108评论 0 5
  • 作者: 阮一峰日期: 2015年7月10日原文链接:http://www.ruanyifeng.com/blog/...
    Mike_Gu阅读 4,558评论 0 6

友情链接更多精彩内容