일련의 테스트를 진행하는 동안 5가지 중앙 집중화 기법을 따라 변경에 가장 탄력적인 기법을 확인해 보세요.
CSS를 중앙에 배치하는 것은 농담과 조롱으로 가득한 악명 높은 과제입니다. 2020년 CSS가 어른이 되었으니 이제 우리는 솔직히 그 농담에 웃음을 터뜨릴 수 있게 되었습니다.
동영상을 선호한다면 이 게시물의 YouTube 버전을 참조하세요.
도전과제
다양한 유형의 중앙 정렬이 있습니다. 다양한 사용 사례, 중앙에 배치할 사물의 수 등에서 '성공' 중앙 집중 기법의 근거를 설명하기 위해 '복원력의 종'을 만들었습니다. 이는 각 중심 전략 내부에서 균형을 이루고 성능을 관찰하기 위한 일련의 스트레스 테스트입니다. 마지막에는 점수가 가장 높은 기법과 '가장 가치 있는' 기법이 표시됩니다. 새로운 센터링 기술과 솔루션을 숙지하시길 바랍니다.
복원력의 종
탄력성 링거는 센터링 전략이 국제 레이아웃, 가변 크기의 표시 영역, 텍스트 수정, 동적 콘텐츠에 대해 복원력이 우수해야 한다는 믿음의 표현입니다. 이러한 원칙은 견딜 수 있는 센터링 기법에 대해 다음과 같은 탄력성 테스트를 구성하는 데 도움이 되었습니다.
- squished: 중앙으로 너비 변경을 처리할 수 있어야 합니다.
- 눌림: 중앙으로 높이의 변화를 처리할 수 있어야 합니다.
- 중복: 항목 수에 맞춰 중앙 배치가 동적이어야 합니다.
- 수정: 중앙은 콘텐츠의 길이와 언어에 맞게 조정되어야 합니다.
- 흐름: 중앙 맞춤은 문서 방향이어야 하며 쓰기 모드에 구애받지 않아야 합니다.
효과적인 솔루션은 콘텐츠를 중앙에 유지한 상태에서 찌그러뜨리거나 찌그러뜨리거나 복제하고 편집하고 다양한 언어 모드와 방향으로 바꿔가는 탄력성을 입증해야 합니다. 신뢰할 수 있고 복원력이 우수한 센터, 안전 센터.
범례
맥락에 맞는 메타 정보를 유지하는 데 도움이 되는 시각적 색상 힌트를 제공합니다.
- 분홍색 테두리는 가운데 맞춤 스타일의 소유권을 나타냅니다.
- 회색 상자는 가운데 항목을 찾으려는 컨테이너의 배경입니다.
- 각 하위 요소는 흰색 배경색을 사용하므로 중앙 맞춤 기술이 하위 상자 크기에 미치는 모든 효과를 확인할 수 있습니다 (있는 경우).
참가자 5명
5개의 중심 테크닉이 탄력성 벨소리에 들어가면 하나만 탄력성 크라운을 받을 수 있습니다. ⏎.
1. 콘텐츠 센터
- Squish: 좋습니다.
- 스쿼시: 좋습니다.
- 중복: 좋습니다.
- 수정: 좋습니다.
- 흐름: 좋습니다.
display: grid과 place-content 약칭의 간결성은 이기지 못할 것입니다. 하위 요소를 전체적으로 가운데 정렬하고 양쪽으로 정렬하므로
읽을 요소 그룹을 위한 견고한 중앙에 배치되는 기법입니다.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- 제한된 공간과 오버플로에서도 콘텐츠가 중앙에 배치됨
- 한곳에서 수정 및 유지보수
- 간격은 n개의 하위 요소 간에 동일한 간격을 보장합니다.
- 그리드는 기본적으로 행 생성
- 가장 넓은 하위 요소 (
max-content)는 나머지 모든 요소의 너비를 설정합니다. 이에 대해서는 Gentle Flex에서 자세히 설명합니다.
단락과 헤드라인, 프로토타입 또는 일반적으로 눈에 잘 띄는 중앙에 배치해야 하는 항목이 포함된 매크로 레이아웃에 적합합니다.
2. 부드러운 플렉스
- Squish: 좋아요.
- 스쿼시:좋습니다.
- 중복: 좋습니다.
- 수정: 좋습니다.
- 흐름: 좋습니다.
Gentle Flex는 진정한 센터링 전용 전략입니다. place-content: center와 달리 가운데 맞춤 중에 하위 요소 상자 크기가 변경되지 않으므로 부드럽고 부드럽게 작동합니다. 가능한 한 모든 항목을 쌓고 중앙에 배치하고 간격을 둡니다.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 정렬, 방향, 배포만 처리
- 한곳에서 수정 및 유지보수
- 간격은 n개의 하위 요소 간에 동일한 간격을 보장합니다.
- 대부분의 코드 줄
매크로 및 마이크로 레이아웃에 모두 매우 바람직합니다.
3. 오토봇
- Squish: 좋습니다.
- 스쿼시: 좋습니다.
- 중복: 괜찮습니다.
- 수정: 좋습니다.
- 흐름: 우수함
컨테이너는 정렬 스타일 없이 flex로 설정되고, 직접 하위 요소는 자동 여백으로 스타일이 지정됩니다. 요소의 모든 측면에서 작동하는 margin: auto는 향수를 불러일으키고 멋진 일입니다.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 재미있는 트릭
- 퀵 앤 더티
- 오버플로가 어색할 경우 결과 표시
- 간격이 아닌 배포에 의존하므로 하위 요소가 측면을 터치할 때 레이아웃이 발생할 수 있습니다.
- 위치로 '밀어넣는' 것은 최적의 방법이 아닌 것처럼 보이며 하위 요소의 상자 크기가 변경될 수 있습니다.
아이콘이나 의사 요소를 중앙에 배치하는 데 적합합니다.
4. 플러피 센터
- Squish: 나쁨
- 스쿼시: 나쁨
- 중복: 좋지 않음
- 수정: 좋습니다.
- 흐름: 좋습니다. (논리적 속성을 사용하는 한)
참가자 '푹신한 센터'는 지금까지 가장 맛있고 들리는 경쟁자이며 전적으로 요소/아동이 소유하는 유일한 센터링 기술입니다. 솔로 안쪽의 분홍색 테두리 보이세요!?
.fluffy-center {
padding: 10ch;
}
- 콘텐츠 보호
- 핵무기
- 모든 테스트에 이 중앙 집중화 전략이 비공개로 포함되어 있습니다.
- 단어 공간이 부족함
- 유용하지 않다는 오해
- 컨테이너와 항목 간에 충돌이 있습니다. 각 항목의 크기가 매우 단단하기 때문입니다.
단어 또는 구문 중심 정렬, 태그, 알약, 버튼, 칩 등에 적합합니다.
5. 팝 앤 플롭
- Squish: 보통
- 스쿼시: 알겠습니다
- 중복: 좋지 않음
- 수정: 괜찮음
- 흐름: 양호
절대 위치로 인해 요소가 일반 흐름에서 벗어나기 때문에 이렇게 '팝'됩니다. 이름에서 'plop' 부분은 가장 유용하다고 생각할 때 다른 항목 위에 놓는 것입니다. 이는 콘텐츠 크기에 유연하고 동적인 클래식하고 편리한 오버레이 중앙 정렬 기법입니다. UI를 다른 UI 위에 배치해야 하는 경우도 있습니다.
- 유용성
- 안정성
- 필요할 때 매우 가치 있음
- 백분율 값이 음수인 코드
- 포함 블록을 강제하려면
position: relative가 필요합니다. - 어색한 초기 줄바꿈
- 추가적인 노력 없이 포함하는 블록당 하나만 있을 수 있습니다.
모달, 토스트 메시지 및 메시지, 스택 및 깊이 효과, 팝오버에 적합
우승자
섬에 갔는데 오로지 센터링 테크닉 하나만 가지고 있으면 좋겠네요...
[드럼 소리]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
이 옵션은 매크로 및 마이크로 레이아웃에 모두 유용하므로 제 스타일시트에서 언제든지 찾을 수 있습니다. 기대에 부응하는 결과를 얻을 수 있는 다재다능한 솔루션입니다. 또한 제가 원래 크기 조절을 좋아하기 때문에 이 솔루션으로 전환하곤 합니다. 사실, 입력할 일이 많기는 하지만 제공하는 이점이 추가 코드보다 훨씬 큽니다.
MVP
푹신한 센터
.fluffy-center {
padding: 2ch;
}
플러피 센터는 아주 미세해서 센터링 기법으로 간과하기 쉽지만 저의 중심 전략에서 핵심적인 역할을 합니다. 너무 원자적이기 때문에 이 기능을 사용하고 있다는 사실을 잊을 때도 있습니다
결론
어떤 유형의 요소가 중심 전략을 깨뜨리나요? 탄력성 벨소리에 어떤 다른 문제를 추가할 수 있을까요? 컨테이너의 변환과 자동 높이 스위치를 고려했습니다. 또 무엇이 더 필요할까요?
이제 내가 어떻게 했는지 알았으니 어떻게 할 건가요? 접근 방식을 다양화하고 웹을 기반으로 빌드하는 모든 방법을 알아보겠습니다 이 게시물의 Codelab을 따라 이 게시물에서처럼 자체 센터링 예를 만들어 보세요. 버전을 트윗해 주시면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.