欢迎光临
我的个人博客网站

关于倒在flex上的那些事

首先每个容器都可以开启弹性布局:display:flex或者display:inline-flex,如果浏览器兼容加上-webkit

理解两个概念:容器和项目
容器即为你要在什么地方开启弹性布局,就是一般为外层的div
项目即为你想设置分布位置的子div

即然分为父和子,那么两者都有不同的属性才对

容器:
flex-direction: row | row-reverse | column | column-reverse; —> 主轴方向
flex-wrap:nowrap | wrap | wrap-reverse; —> 项目是否换行
flex-flow:相当于flex-direction + flex-wrap 默认值为row nowrap
justify-content:flex-start | flex-end | center | space-between | space-around; —> 主轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch; —> 垂直轴对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch; —> 多根轴线的对齐方式

项目:
order: ; —> 排列顺序
flex-grow: ; —> 放大比例
flex-shrink: ; —> 缩小比例
flex-basis: | auto; —> 占据剩余空间,默认auto,本来大小
flex:flex-grow + flex-shrink + flex-basis
align-self: auto | flex-start | flex-end | center | baseline | stretch; —> 单个设置,覆盖align-items

引用:阮一峰大神的flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

赞(0) 打赏
未经允许不得转载:张拓的天空 » 关于倒在flex上的那些事
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏