flex

Flex Terms

创建flex container

·display:block|inline|inline-block|none|flex

flex item

·在文档流中的子元素

flex

·方向

·方向 flex-direction:row|row-reverse|column|column-reverse

·换行 flex-wrap:nowrap|wrap|wrap-reverse

·flex-flow:<'flex-direction'>||<'flex-wrap'>

·order:<interger> initial:0


·弹性

·flex-grow:<number>

·inital:0

·设置元素可以分配到的空余的空间比例

·flex-shrink:<number>

·initial:1

·设置元素可以分配到的负空余的空间比例

·flex-basis:main-size|<width>

·设置flex item的初始宽/高

弹性元素的宽度:

flex-basis + flow-grow/sum(flow-grow)*remain

剩余空间为负:flex-basis + flow-shrink/sum(flow-shrink)*remain

·flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>

·initial:0 1 main-size

·对齐

·justify-content:flex-start|flex-end|center|space-between|space-around

·设置main-axis方向上对齐方式

·like text-align

·align-items:flex-start|flex-end|center|baseline|stretch

·设置cross-axis方向上对齐方式

·like vertical-align

·align-self:auto|flex-start|flex-end|center|baseline|stretch

·设置单个flex item在cross-axis方向上对齐方式

·align-content:flex-start|flex-end|center|space-between|space-around|stretch

·设置cross-axis方向上行对齐方式

 三行两列自适应布局

flex ie9及以下不支持,目前主要用于移动web页面中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 9,711评论 3 55
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 8,692评论 0 27
  • 传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。对于一些特殊的布局...
    exialym阅读 7,471评论 0 11
  • 作者: 阮一峰日期: 2015年7月10日原文链接:http://www.ruanyifeng.com/blog/...
    Mike_Gu阅读 4,556评论 0 6
  • 网页布局(layout)是CSS的一个重点应用。 一、Flex布局是什么? Flex是Flexible Box的缩...
    抱着熊喵啃什么阅读 3,798评论 0 4