Flex 레이아웃을 사용하여 북마크를 먼저 수직으로 그리고 수평으로 분포하는 방법은 무엇입니까?

Flex 레이아웃 및 CSS 선택기를 영리하게 사용하여 북마크의 먼저 분포를 먼저 수직으로 다음 수평으로 달성합니다.

북마크 관리 확장을 개발할 때 많은 수의 북마크를 효율적으로 배열하는 방법은 일반적인 과제입니다. 이 기사는 Flex 레이아웃 및 CSS 선택기 an b 사용하는 영리한 방법을 소개하여 책갈피의 균일 한 분포를 먼저 수직으로 다음 수평으로 달성하여 유한 한 수의 열에 따라 고르지 않은 배열 문제를 피합니다.

질문 : 여러 개의 북마크가 있다고 가정하고 수직으로 먼저, 수직으로 가득 차서 수평으로 배열되어야하며, 마지막으로 균등하게 분포해야합니다. 예를 들어, 6 개의 북마크와 5 개의 열이 표시되며 이상적인 결과가 표시됩니다.

<code>一二三四五① ③ ④ ⑤ ⑥ ②</code>

그러나 실제 효과는 다음과 같습니다.

<code>一二三四五① ③ ⑤ ② ④ ⑥</code>

마지막 몇 개의 열이 비어있는 것처럼 보입니다. 기존 레이아웃은 컨테이너 높이를 조정하여 행의 수를 제어하는 ​​Flex 레이아웃 ( flex-direction: column )을 채택하고 북마크 추가 및 삭제 및 바로 가기 키 작업을 지원합니다.

솔루션 : 복잡한 알고리즘이 필요하지 않으며 CSS 선택기를 활용 an b . 책갈피와 열의 총 수를 계산하여 적절한 a 및 b 값을 결정한 다음이 선택기를 사용하여 특정 책갈피에 하단 여백을 추가하십시오 (예 : margin-bottom: 1px; ). 이 방법은 간단하고 효율적이며 바로 가기 키의 작동과 북마크 추가 및 삭제에는 영향을 미치지 않습니다. 이 방법을 통해 빈 열을 피하고 북마크를 수직으로 그리고 가로로 고른 분포를 달성 할 수 있습니다.

위 내용은 Flex 레이아웃을 사용하여 북마크를 먼저 수직으로 그리고 수평으로 분포하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!