flex布局

参考资料：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 flex用是一个容器(container)的样子，所有的项目(item)都在容器里。

 

对于排列，有多种方式，你可以选择横着排或者竖着排。

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

 当你确定他的排列顺序以后。也就是为了定下了主基调，而副基调就应运而生。

假设我选择他的主基调（main axis主轴）为横排，则他的副基调(cross axis 交叉轴)就为竖排。

选择完排列的顺序后，就可以将那些项目(item)一个个摆进去了。

摆的时候会遇到几个问题，谁先摆？一行摆不下了怎么办？

谁先摆？order系数来决定，小值在前大值在后。

一行摆不下了就可以选择换行或者不换行继续一直摆

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

对于布局，我们讲究美观，对齐就是一个重要的地方，怎么对齐呢？

justify-content：为主轴的对齐方式。

 

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

 align-items：定义了交叉轴的对齐方式。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

 align-content:多根轴线的对齐方式。

 

当摆放完整体布局以后，小item具体的摆放规则还没有详细说。

一排摆的时候，可能会遇到缩放问题。

flex-grow：按比列放大。

当一排为350大小，每一个item为100，多出50就按照比列分配加上放大，50*1/3

flex-shrink:按比列缩小

整体有200，每一个200，一共600 600-200就是要缩小的大小，然后按比列分配400*1/3 轮流缩小，有可能因为shrink的数值太大，然后他直接就缩小到没了。。

 

flex-basis:定义了没分配多余空间，占的大小。

 

flex：上述三个的都写在一个里面。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self：特立独行的做法，可以不按照和其他item一样的交叉轴排列方式。

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