justify-content & align-items & align-content

Posted 2020-10-06 Tekkaman

【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;
  }
}

View Code

http://caibaojian.com/demo/flexbox/flexbox4.html

2、移动优先布局

http://caibaojian.com/demo/flexbox/flexbox5.html

参考：http://caibaojian.com/flexbox-guide.html