Flexbox에서 이미지 정렬과 관련된 문제 및 과제

Question

나는 최근에 내가 직접 개발한 홈페이지 작업을 하고 있는데 플렉스박스에서 내 항목을 정렬하는 데 약간의 어려움을 겪고 있습니다. 첫 번째 Flexbox에는 3개의 이미지가 포함되어야 하며 모든 이미지는 서로 아래에 수직선에 있어야 합니다. 이는 두 번째 Flexbox에도 중요합니다. 이것은 내 코드입니다: .flexcontainer-1{display:flex;justify-content:flex-start;align-items:left;height:auto;width:auto;

P粉795311321 · Answer

이 레이아웃을 구현하는 방법은 여러 가지가 있습니다. CSS 그리드, Flexbox 및 다중 열 레이아웃은 모두 서로 다른 방식으로 작동합니다.

제가 가장 먼저 추천하는 것은 HTML을 수정하는 것입니다. 의미상으로는 목록을 사용해야 함을 즉시 제안하는 속성 목록을 표시하는 것 같습니다(순서가 있거나 순서가 지정되지 않음). 설명 텍스트와 이미지가 있어야 하며 이는

요소를 제안합니다.

이 개정판을

标记（或

、

...)으로 감싸면 위의 HTML은 다음과 같이 될 수 있습니다.

으아아아

다중 열 레이아웃과 함께 사용하고 CSS에 설명 주석을 추가하세요.

으아아아 으아아아

JS 바이올린 데모.

CSS 그리드를 사용하여 이 작업을 수행할 수도 있지만 그리드가 있는 숫자는 왼쪽에서 오른쪽으로, 위에서 아래로 흐릅니다.

으아아아 으아아아

JS 바이올린 데모.

또한 유연한 레이아웃을 사용하세요:

으아아아 으아아아

JS 바이올린 데모.

참조:

P粉347804896 · Answer

첫 번째 컨테이너에 h4를 사용하고 있는 것 같습니다.

이 요소를 flexcontainer-1에서 가져오세요.

원하는 결과를 얻으려면 이렇게 해야 합니다

으아아아 으아아아