align-content와 align-items의 차이점

질문 : align-content와 align-items의 차이점은 무엇입니까?

---

align-items 와 align-content 의 차이점을 보여줄 수 있습니까?

답변

---

flex-box의 align-items justify-content 가 주 축을 따라하는 것처럼 교차 축을 따라 플렉스 컨테이너 내부의 항목을 정렬합니다. (기본 flex-direction: row 경우 교차 축은 수직에 해당하고 주 축은 수평에 해당합니다. flex-direction: column 하면이 두 개가 각각 교환됩니다.)

align-items:center 모양의 예입니다.

그러나 align-content 는 여러 줄의 유연한 상자 용입니다. 항목이 한 줄에있는 경우에는 효과가 없습니다. 값에 따라 전체 구조를 정렬합니다. 다음은 align-content에 대한 예제입니다 align-content: space-around; :

그리고 여기에 align-content: space-around; align-items:center look :

세 번째 상자와 첫 번째 줄의 다른 모든 상자가 해당 줄의 세로 가운데로 변경됩니다.

다음은 사용할 수있는 몇 가지 코드 펜 링크입니다.

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

다음 은 flexbox에서 거의 모든 것을 보여주고 놀 수있는 매우 멋진 펜입니다.

출처 : https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items