Flexible Box 弹性布局

为盒状模型提供最大的灵活性

基本概念

• 项目,项目成员
  • 水平的主轴
  • 垂直的交叉轴

项目属性

• 1.flex-direction
  • 决定项目成员在主轴上的方向
• 2.flex-wrap
  • 决定项目成员在一条轴线上排不下，如何换行
• 3.flex-flow
  • flex-direction属性和flex-wrap属性的简写形式
• 4.justify-content
  • 定义了项目成员在主轴（水平）上的对齐方式
• 5.align-items
  • 定义项目在交叉轴（垂直）上如何对齐,具体的对齐方式与交叉轴的方向有关
• 6.align-content
  • 多根轴线情况下，项目成员在交叉轴（垂直）上如何让对齐，PS:只有一根主轴时，该属性不起作用

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

flex-flow:row | row-reverse | column | column-reverse || nowrap | wrap | wrap-reverse;

justify-content

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

align-items

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

align-content

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

项目属性

• 1.order
  • 用整数值来定义排列顺序
• 2.flex-grow
  • 义项目的放大比例,
• 3.flex-shrink
  • 定义了项目的缩小比例
• 4.flex-basis
  • 定义了在分配多余空间之前，项目占据的主轴空间
• 5.flex
  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写
• 6.align-self
  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

order

order:integer;/* default 0 */

默认为0，数值小的排在前面。可以为负值order定义将会影响 position值为static元素的层叠级别，数值小的会被数值大的盖住。

flex-grow

flex-grow:number;/* default 0 */

默认为0，即如果存在剩余空间，也不放大

flex-shrink

flex-grow:number;/* default 1 */

默认为1，即剩余空间不足，该项目将缩小

flex-basis

flex-basis: length | percentage | auto; /* default auto */

默认值为auto，即项目的本来大小，根据每项设置的基准值，按比率伸缩剩余空间

flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

Thanks