정당화 내용과 정렬 항목의 차이점은 무엇입니까?

정당화 내용과 정렬 항목의 차이점은 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• CSS Flexbox에서 "justify-items"및 "justify-self"속성이없는 이유는 무엇입니까? 5 답변

차이점이 무엇인지 이해하는 데 정말 어려움을 겪고 있습니까? 내 연구에서 그것은 것 같다 justify-content할 수 있습니다 ... space-between그리고 space-around, 동안 align-items할 수 ... stretch, baseline, initial와 inherit?

또한 두 속성 공유 flex-start, flex-end및 center.

하나를 다른 것보다 사용하는 데 단점이 있습니까? 아니면 선호합니까? 나는 그들이 그 차이를 아는 사람과 똑같은 일을하는 것과 비슷하다고 느낍니까? 감사!!

---

노트 :

X 및 Y 사용하는 경우 축 / 배향 방향을 따라 변경할 수 flex-direction: 의 행 또는 열을

1. justify-content:수평

기본 축 (X 축)을 따른 정렬 및 간격

flex-start;자식을 수평으로 왼쪽 정렬

flex-end;자식을 가로로 오른쪽으로 정렬

center;아이들을 가로로 가운데 정렬 (놀라운!)

space-between;전체 너비에 걸쳐 수평으로 균등하게 자식을 배포

space-around;전체 너비에 걸쳐 수평으로 균등하게 자식을 배포합니다 (그러나 가장자리에 공간이 있음)

2. align-items:수직

보조 축 (Y 축)을 따라서 만 정렬

flex-start;아이들을 수직으로 위로 정렬

flex-end;자식을 수직으로 아래쪽으로 정렬

center;아이들을 세로로 가운데 정렬 (놀라운!)

baseline;기준선이 정렬되도록 자식을 수직으로 정렬 (실제로 작동하지 않음)

stretch;자식을 컨테이너 높이로 지정 (열에 적합)

실제 사례보기 :

http://codepen.io/enxaneta/full/adLPwv/

제 생각에는 :

이름은 다음과 같아야합니다.

flex-x: 왼쪽 또는 오른쪽 또는 가운데 또는 늘이기 또는 간격 사이 또는 간격

flex-y: 왼쪽 또는 오른쪽 또는 가운데 또는 늘이기

그러나 HTML을 사용하면 좋은 것을 가질 수 없습니다. 못.

참고 URL : https://stackoverflow.com/questions/35049262/difference-between-justify-content-vs-align-items