이제 블록 레이아웃의 align-content 속성이 기준의 일부임
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이제 블록 및 테이블 레이아웃에서 CSS 상자 정렬의 align-content
속성을 사용할 수 있습니다. 이렇게 하면 가변 레이아웃이나 그리드 레이아웃을 만들지 않고도 블록 방향 정렬을 사용할 수 있습니다.
축하: 이 웹 기능은 현재 세 가지 주요 브라우저 엔진 모두에서 사용할 수 있으며 2024년 4월 16일부터 새로 사용 가능한 기준 이 됩니다.
이전에는 불가능했던 항목을 세로 방향으로 중앙에 배치하는 작업이 align-content
속성과 함께 flexbox와 그리드를 더 쉽게 사용할 수 있었습니다. 그러나 이 정렬을 실행하는 것 외에 다른 이유로 가변 또는 그리드 레이아웃을 만드는 것이 포함되었습니다.
이 속성은 블록 레이아웃에 지정되었으며 지난 몇 달 동안 세 가지 주요 엔진에서 모두 이 기능을 출시했습니다.
블록 레이아웃에 align-content
를 사용하면 속성이 작동하는 가변 또는 그리드 레이아웃을 만들지 않고도 세로 정렬을 수행할 수 있습니다. 항목이 블록 항목으로 유지되므로 추가 속성이 필요하지 않으며 정렬만 변경됩니다.
align-content
속성은 블록 컨테이너 내에서 제목을 세로로 중앙에 배치합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-04-17(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2024-04-17(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-04-17(UTC)"],[],[]]