CSS Flexbox Navbar — 왼쪽 로고, 오른쪽 링크
CSS Flexbox 레이아웃을 시각적으로 구축합니다. flex-direction, justify-content, align-items, flex-wrap 및 컨테이너의 간격과 자식별 flex-grow, flex-shrink 및 flex-basis가 모두 실시간 미리보기와 복사 가능한 CSS로 제공됩니다.
결과
이 페이지는 클래식 navbar 레이아웃에 대한 flexbox 생성기 사전 설정을 엽니다. justify-content는 space-between으로 설정되고 align-items는 가운데로 설정됩니다. 첫 번째 상자에 로고를 넣고 마지막 상자에 탐색 링크 행을 넣으면(또는 중간 상자에 걸쳐 링크를 분할) Flexbox 컨테이너는 로고나 링크 텍스트의 높이에 관계없이 모든 항목을 동일한 수직 중앙에 정렬하면서 이를 막대의 반대쪽 끝으로 푸시합니다.
space-between이 이 작업을 수행합니다. 첫 번째 자식을 시작 가장자리에 고정하고 마지막 자식을 끝 가장자리에 고정한 다음 나머지 자식을 균등하게 펼칩니다. 거의 모든 사이트 헤더가 사용하는 왼쪽 로고, 오른쪽 링크 모양과 같습니다. align-items: center 그런 다음 줄 높이 해킹이나 테이블 셀 표시 트릭이 필요했던 수직 정렬을 해결합니다.
실제 탐색 표시줄(기본 로고 및 CTA 표시줄을 위한 상자 2개, 로고 및 여러 링크를 위한 상자 2개)과 일치하도록 하위 수를 조정하고 레이아웃이 실시간으로 적용되는 것을 확인하세요. 헤더와 일치하면 CSS 블록을 복사하거나 가까운 친척과 비교하여 해당 속성을 보려면 공백 사이 사전 설정을 엽니다.