flex布局(order align-self)

1.order运用

#pond {
  display: flex;
}

.yellow {
order:1
}

默认值为0，1往右移一个，-1往左移一个

2.例子

#pond {
  display: flex;
}

.red {
order:-3
}

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

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
}

4.order align-self

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
order:1;
align-self: flex-end;
}

用order:1;

用align-self: flex-end;