flex-box가 align-items 属性沿着横轴对齐 Flex 容器内的项目，就像 justify-content 沿着主轴对齐一样。 （对于默认的 flex-direction: row ，交叉轴对应于垂直方向，主轴对应于水平方向。使用 flex-direction: column인 경우 이 두 축은 각각 바뀔 수 있습니다.
다음은 align-items:center 모양의 예입니다.
그러나 align-content 适用于多行灵活框。当项目位于一行中时，它没有任何效果。它根据其价值来调整整个结构。以下是 align-content: space-around;의 예:
이것은 align-content: space-around;가 align-content: space-around; 与 align-items:center:
과 같은 모습입니다.
첫 번째 행의 세 번째 상자와 다른 모든 상자는 해당 행의 수직 중앙에 위치하도록 변경됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
flex-box가
align-items属性沿着横轴对齐 Flex 容器内的项目，就像justify-content沿着主轴对齐一样。 （对于默认的flex-direction: row，交叉轴对应于垂直方向，主轴对应于水平方向。使用flex-direction: column인 경우 이 두 축은 각각 바뀔 수 있습니다.다음은
align-items:center모양의 예입니다.그러나
align-content适用于多行灵活框。当项目位于一行中时，它没有任何效果。它根据其价值来调整整个结构。以下是align-content: space-around;의 예:이것은
과 같은 모습입니다.align-content: space-around;가align-content: space-around;与align-items:center:첫 번째 행의 세 번째 상자와 다른 모든 상자는 해당 행의 수직 중앙에 위치하도록 변경됩니다.
다음은 사용할 수 있는 몇 가지 코드펜 링크입니다:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
이것은 Flexbox의 거의 모든 것을 표시하고 사용할 수 있는 매우 멋진 펜입니다.