Flex 布局实用笔记

• 任何一个容器都可以指定为 Flex 布局

{
display: flex
display: inline-flex; //行内元素也可以使用 Flex 布局
display: -webkit-flex;//Webkit 内核的浏览器，必须加上-webkit前缀
}

• 主轴的方向和换行

{
flex-direction: row | row-reverse | column | column-reverse;//属性决定主轴的方向
flex-wrap: nowrap | wrap | wrap-reverse;
}
or
{
flex-flow: || ;//默认值为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: ;//数值越小，排列越靠前，默认为0。
  flex-grow: ; //属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  flex-shrink: ;//属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  flex-basis: | auto;//属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto
  }
  or
  {
  flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
  }
• 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto

{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}