Flex 布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

容器的6个属性

一 flex-direction    决定item的排列方向

flex-direction: row; //(默认值) 主轴为水平方向，项目沿主轴从左至右排列

flex-direction: column; //主轴为竖直方向，项目沿主轴从上至下排列

flex-direction: row-reverse; //主轴水平，项目从右至左排列，与row反向

flex-direction: column-reverse; //主轴竖直，项目从下至上排列，与column反向

二 flex-wrap    排列不下时,如何换行

flex-wrap: nowrap; //(默认值) 自动缩小项目，不换行

flex-wrap: wrap; //换行，第一行在上方

flex-wrap: wrap-reverse; //换行，第一行在下面

三 flex-flow    flex-direction和flex-wrap的简写

      默认值为   flex-flow: row nowrap;

四 justify-content    决定主轴上的对齐方式

justify-content: flex-start; //（默认值）左对齐

justify-content: flex-end; //右对齐

justify-content: center; //居中

justify-content: space-between; //两端对齐

justify-content: space-around; //延轴线平均分布

五 align-items    item在交叉轴上的方向的对齐方式

align-items: flex-start; //交叉轴的起点对齐

align-items: flex-end; //交叉轴的终点对齐

align-items: center; //交叉轴的中点对齐

align-items: baseline; //以第一行文字的基线对齐

align-items: stretch;  //（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。

六 align-content    多根轴线的对齐方式​

justify-content 一样的用法,只不过方向相反  注意只有在多根轴线时该属性才生效

 

item的6个属性

一 order    定义item的排列顺序 默认为0 数字越小排名越靠前

order: 0;

二 flex-grow    当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；值为整数，表示不同item的放大比例，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个item的flex-grow属性为2，其他item都为1，则前者占据的剩余空间将比其他项多一倍。

flex-grow: 0;

三 flex-shrink    当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个item的flex-shrink属性为0，其他item都为1，则空间不足时，前者不缩小。

flex-shrink: 1;

四 flex-basis    在分配多余空间之前，item占据的主轴空间 (如果空间不足的情况下也会缩小)。它的默认值为auto，即项目的本来大小。

flex-basis: 80px;

五 flex    flex属性是flex-grow、flex-shrink和flex-basis三属性的简写 (一般使用为 flex: 1;  占满剩下的所有空间)

//该属性有两个快捷值：
flex: none;  // flex-grow:0; flex-shrink: 0; flex-basis: auto;
flex: auto;  // flex-grow:1; flex-shrink: 1; flex-basis: auto;

 六 align-self    单个item在交叉轴上的对齐方式，和align-items属性一样,可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

 

常用属兼容写法

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-w {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-x {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex-y {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-j-start {
  -webkit-box-pack: start;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-j-center {
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.flex-j-end {
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-j-between {
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-j-around {
  -moz-justify-content: space-around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-a-start {
  -webkit-box-align: start;
  -moz-align-items: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flex-a-center {
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.flex-a-end {
  -webkit-box-align: end;
  -moz-align-items: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}