【justify-content & align-items & align-content】
三个属性均作用于container。
justify-content用于控制main-axis。
align-items用于控制元素在单选中cross-axis中的位置。
align-content用于控制各行在container中cross-axis的位置。
【align-self】
作用于元素，控制元素在单选中cross-axis中的位置。
【示例】
1、自适应导航。
当小于800px时，内容为居中，当小于500px时，内容纵向排列，从上到下。
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
} /* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
} /* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
http://caibaojian.com/demo/flexbox/flexbox4.html
2、移动优先布局