`flex: 0 0 25%`를 사용하여 Flex 항목에 1px 여백을 추가하는 방법은 무엇입니까?

flex가 있는 Flex 항목에 1px 여백 추가: 0 0 25%

flex 레이아웃으로 작업할 때 추가하는 것이 바람직할 수 있습니다. 항목을 조정하기 위한 작은 여백(예: 1px) 그러나 Flexbox는 본질적으로 분수 값을 여백으로 허용하지 않습니다.

flex: 0 0 25%를 사용하여 정의된 Flex 항목의 경우 1px 여백을 직접 추가하는 것은 불가능합니다. 이는 flex-basis가 25%로 고정되어 여백을 위한 사용 가능한 공간이 없기 때문입니다.

해결책:

이 시나리오에서 1px 여백을 달성하려면, flex-grow 속성 활용:

flex: 1 0 22%;

• flex: 1: flex-grow를 사용하면 요소가 지정된 플렉스 기반 이상으로 확장될 수 있습니다.
• 0: 요소가 플렉스 기반 아래로 축소되지 않도록 flex-shrink를 0으로 설정합니다.
• 22%: 각 측면에서 원하는 1px 여백을 고려하여 플렉스 기준이 22%로 감소합니다(2/11 = 측면당 0.19%, 합산 시) 22%로 결과는 25%).

flex-basis를 줄이고 flex-grow를 늘리면 요소는 정의된 비율을 유지하면서 원하는 마진을 갖게 됩니다.

예:

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

<div>

위 내용은 `flex: 0 0 25%`를 사용하여 Flex 항목에 1px 여백을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!