flex布局属性快速参考

简介: 这里只是一篇属性参考,详细的教程请参考这篇博客。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

这里只是一篇属性参考,详细的教程请参考这篇博客。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex容器上的属性

  1. flex-direction : row | row-reverse | column | column-reverse
  2. flex-wrap: nowrap | wrap | wrap-reverse
  3. flex-flow : flex-direction || flex-wrap
  4. justify-content: flex-start | flex-end | center | space-between | space-around
  5. align-items : flex-start | flex-end | center | baseline | stretch
  6. align-content : flex-start | flex-end | center | stretch | space-around | stretch

flex项目上的属性

  1. order : integer 越小越靠前
  2. flex-grow : number(0) 放大比例
  3. flex-shrink : number(1) 缩小比例
  4. flex-basis : length | auto
  5. flex : flex-grow || flex-shrink || flex-basis
  6. align-self : auto | flex-start | flex-end | center | baseline | stretch 在这单个flex项目上覆盖flex容器 上设置的align-items属性
目录
相关文章
Flex布局实战详解(上)
Flex布局实战详解(上)
112 0
Flex布局实战详解(下)
Flex布局实战详解(下)
72 0
|
容器
Flex 布局教程:语法篇
Flex 布局教程:语法篇
152 0
Flex 布局教程:语法篇
flex布局及常用属性,学flex收藏这个就够用了,超详细分析“建议收藏”
flex布局及常用属性,学flex收藏这个就够用了,超详细分析“建议收藏”
120 0
|
Web App开发
flex布局实战
一、网格布局 最简单的网格布局,就是平均分布,在容器里面平均分配空间,但是要设置项目的自动缩放。 比较简单不做过多解释,代码如下 二、百分比布局 某个网格的宽度是固定的百分比,其余网格平均分配剩余空间 flex 属性,是以下三个属性的简...
1098 0
|
XML JavaScript 数据格式