정렬 내용과 정렬 항목의 차이점은 무엇입니까?
답변:
align-itemsflex-box 의 속성은 주축을 justify-content따라하는 것처럼 가로축을 따라 flex 컨테이너 내부의 항목을 정렬합니다 . (기본적으로 flex-direction: row횡축은 수직에 해당하고 주축은 수평에 해당합니다.이 flex-direction: column둘을 각각 교환합니다).
다음은 모양의 예입니다 align-items:center.
그러나 align-content멀티 라인 플렉시블 박스 용입니다. 항목이 한 줄에 있으면 효과가 없습니다. 값에 따라 전체 구조를 정렬합니다. 예를 들면 다음과 같습니다 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의 거의 모든 것을 보여주고 재생할 수있는 매우 멋진 펜입니다.
align-*특성도 수평 플렉스 항목을 전환 할 수 있습니다. 에 따라 다릅니다 flex-direction. stackoverflow.com/q/32551291/3597276
http://flexboxfroggy.com/ 예제가 매우 유용하다는 것을 알았습니다 .
10-20 분 정도 소요되며 21 단계에서는 질문에 대한 답변을 찾을 수 있습니다. 그것은 언급했다 :
align-content 는 줄 사이의 간격을 결정하고 align-item 은 전체 항목이 컨테이너 내에서 정렬되는 방식을 결정합니다. 한 줄만 있으면 align-content 는 영향을 미치지 않습니다.
첫째, align-items한 행에있는 항목을위한 것입니다. 의 요소의 단일 행에 대한 그래서 주축 , align-items서로 각각의 이러한 항목을 정렬하고 그 다음 행에서 신선한 관점에서 시작됩니다.
이제 align-content행의 항목을 방해하지 않고 행 자체를 방해 합니다 . 따라서 align-content서로에 대해 행을 정렬하고 컨테이너를 플렉스하려고합니다.
이 바이올린을 확인하십시오 : https://jsfiddle.net/htym5zkn/8/
나는 같은 혼란을 겪었다. 위의 많은 답변을 바탕으로 약간의 땜질을 한 후에 마침내 차이점을 볼 수 있습니다. 겸손한 견해로는 다음 두 가지 조건을 만족하는 플렉스 컨테이너를 사용하여 구별하는 것이 가장 좋습니다.
- 플렉스 컨테이너 자체에는 높이 제약
min-height: 60rem이 있으므로 내용물에 비해 키 가 커질 수 있습니다. - 컨테이너에 동봉 된 하위 항목의 높이 가 고르지 않습니다
조건 1 은 content부모 컨테이너와 관련된 의미를 이해하는 데 도움이됩니다 . 내용물이 컨테이너와 플러시되면에서 발생하는 포지셔닝 효과를 볼 수 없습니다 align-content. 교차 축을 따라 여분의 공간이있는 경우에만 효과가 나타납니다. 부모 컨테이너의 경계를 기준으로 내용을 정렬합니다.
조건 2 는 효과를 시각화하는 데 도움이됩니다 align-items. 항목이 서로에 대해 정렬됩니다.
다음은 코드 예입니다. 원자재는 Wes Bos의 CSS Grid 튜토리얼 (21. Flexbox와 CSS Grid)에서 가져 왔습니다.
- HTML 예 :
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">💩</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>- CSS 예 :
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}예제 1 : 컨텐츠가 컨테이너와 플러시되도록 뷰포트를 좁힙시다. align-content: flex-start;전체 내용 블록이 컨테이너 내부에 단단히 고정되어있어 효과가없는 경우 입니다 (위치를 변경할 여지가 없습니다).
또한 2 행에 유의하십시오. 항목이 어떻게 중심 정렬되는지 확인하십시오.
예 2 : 뷰포트를 넓힐수록 더 이상 전체 컨테이너를 채울 내용이 충분하지 않습니다. 이제 align-content: flex-start;컨테이너의 상단 가장자리를 기준으로 내용을 정렬합니다.
이 예제는 flexbox를 기반으로하지만 CSS 그리드에도 동일한 원칙이 적용됩니다. 도움이 되었기를 바랍니다 :)
글쎄, 나는 내 브라우저에서 그것들을 조사했다.
align-content그것의 값은 연신되면 열에 대해 로우 방향 또는 폭에 대한 라인 높이를 변경하거나 또는 사이에 대한 라인 주위의 빈 공간을 추가 할 수있는 space-between, space-around, flex-start, flex-end values.
align-items줄 영역 내부의 항목 높이 또는 위치를 변경할 수 있습니다. 아이템이 랩핑되지 않은 경우, 아이템은 하나의 라인 만 가지며, 그 라인은 항상 플렉스 박스 영역으로 확장됩니다 (아이템이 오버 플로우 되더라도) align-content. 단일 라인에는 영향을 미치지 않습니다. 따라서 포장되지 않은 품목에는 영향을 미치지 않으며 align-items모든 품목이 한 줄에있을 때 품목의 위치를 변경하거나 늘릴 수 있습니다.
그러나 줄 바꿈 된 경우 각 줄 안에 여러 줄과 항목이 있습니다. 그리고 각 행의 모든 항목이 동일한 행 (행 방향)을 갖는 경우 해당 행의 높이는 해당 항목 높이와 같으며 align-items값 을 변경해도 아무런 효과가 없습니다 .
따라서 아이템을 줄 align-items바꿈하고 같은 높이 (행 방향)를 기준으로 아이템에 영향 align-content을 주려면 먼저 선 영역을 확장하기 위해 스트레치 값 을 사용해야 합니다.
내용 정렬
align-content서로에 대해 여러 줄 의 교차 축 (즉, 세로 방향은 flex-directionis row이고 가로 방향은 flex-directionis column) 을 제어합니다.
단락의 선이 세로로 펼쳐지고 위쪽으로 쌓여 있고 아래쪽으로 쌓여 있다고 생각하십시오. 이것은 flex-direction행 패러다임 아래에 있습니다.
아이템 정렬
align-items 개별 플렉스 요소 라인의 교차 축을 제어합니다.
(단, 일반 텍스트와 수학 방정식과 같이 키가 큰 텍스트가 포함 된 단락의 개별 줄이 어떻게 정렬되는지 생각해보십시오.이 경우 줄의 각 텍스트 유형의 맨 아래, 맨 위 또는 가운데가됩니다. 정렬?)
모든 답변에서 배우고 블로그를 방문하는 것은
십자 축과 주축은 무엇입니까
- 주축은 가로 행이고 가로축은 세로 열입니다.
flex-direction: row - 주축은 세로 열이고 가로축은 가로 행입니다.
flex-direction: column
이제 내용 정렬 및 항목 정렬
align-content 는 행에 대한 것이며 컨테이너에 (둘 이상의 행)이있는 경우 작동합니다.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}정렬 항목 은 행의 항목에 대한 것입니다. 정렬 항목의 속성
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}flex에 대한 추가 참조 방문