너비와 유연한 아이템을 만드는 것은 함께 훌륭하게 재생됩니다

짧은 답변 : flex-shrink 및 flex-basis 특성은 원하는 솔루션 일 가능성이 높습니다.

자세한 답변

이미지와 텍스트가 나란히 배열되기를 원한다고 가정 해 봅시다.

이제 Flexbox를 사용하여이를 달성한다고 가정 해 봅시다. display: flex; 좋은 출발입니다.

 <code>.container { display: flex; }</code>

……

죄송합니다! 좋아, 나는 이것이 받아 들여질 것이라고 생각한다. 이미지의 너비를 설정하지 않기 때문에 이미지가 텍스트에 가깝다는 것이 합리적입니다. 이상적으로는 이미지에 고정 너비가 있고 텍스트는 나머지 공간을 차지합니다.

좋아, 해보자!

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

이것은 크롬에서 멋지게 보입니다. 하지만 잠깐만 요? Firefox DevTools에서 이미지 태그를 확인하면 우리는 그것이 우리가 설정 한 너비 값이 아님을 알게 될 것입니다.

min-width 사용하여 이미지가 원하는 50px 너비에 도달하도록 강요 할 수 있습니다.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

그러나 이것은 너비를 설정하는 데 도움이되므로 마진도 추가해야합니다.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

그게 다야. Firefox에서 더 좋으며 크롬에서 여전히 작동합니다.

보다 자세한 답변

flex-shrink 속성을 사용하여 폭이 크기가 있는지 여부에 관계없이 크기를 줄이지 말라고 지시해야하기 때문에 이미지가 압축되어 있음을 깨달았습니다.

모든 Flex 프로젝트의 flex-shrink 값은 1입니다. 이미지 요소를 0으로 설정해야합니다.

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

더 좋고 더 나은! 그러나 우리는 여전히 더 많은 개선을 할 수 있습니다.

최종 답변

flex-shrink flex 약어 속성에 포함되어 있기 때문에 더 구성 할 수 있습니다.

 <code>flex: none | [ ? || ]</code>

flex-shrink 값을 0으로 설정하고 flex-basis 값을 이미지의 기본 너비로 설정하면 width 속성을 완전히 제거 할 수 있습니다.

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

오, 그래 :

또 다른 예

flex-shrink 속성은 다른 많은 문제를 해결하며 Flexbox를 사용하려는 경우 매우 중요합니다. 이유의 또 다른 예는 다음과 같습니다. 나는 최근 뉴스 레터에서 언급 한 위와 비슷한 또 다른 질문을 우연히 발견했습니다. 사용자가 여러 프로젝트를 왼쪽과 오른쪽으로 스크롤 할 수있는 탐색 구성 요소를 구축하고 있습니다. 내 작업을 확인하는 동안 다음과 같은 문제를 발견했습니다.

더 긴 탐색 항목은 그런 식으로 포장되지 않아야합니다. 그러나 이전 질문 덕분에 이것이 왜 이런 일이 발생하는지 알았습니다. flex-shrink 속성을 0으로 설정하면이 내비게이션의 각 항목이 줄어들지 말고 내용의 너비를 가져 오도록 지시합니다.

예, 내비게이션 컨테이너에 공간을 할당 할 때 모든 항목에 대해 가능한 많은 공간을 고려하기 때문에 auto flex-basis 으로 사용하기 위해 flex 속성을 사용하기 위해 추가 단계를 다시 수행 할 수 있습니다.

오랫동안 살다! 우리는 그것을 해결했습니다. 답은 단지 코드 라인이지만 진정으로 유연한 요소를 만드는 것이 중요합니다.

위 내용은 너비와 유연한 아이템을 만드는 것은 함께 훌륭하게 재생됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!