단일 flexbox 항목을 정당화하는 방법 (justify-content 재정의)

당신은 대체 할 수 있습니다 align-items로align-self 플렉스 항목. justify-content플렉스 항목 을 재정의하는 방법을 찾고 있습니다 .

으로 flexbox 컨테이너를 가지고 justify-content:flex-end있지만 첫 번째 항목을 원한다면 justify-content: flex-start어떻게 할 수 있습니까?

이것은이 게시물에 의해 가장 잘 대답되었습니다 : https : //.com/a/33856609/269396

이 될 것 같지 않습니다 justify-self,하지만 당신은 유사한 결과 설정 적절한 달성 할 수 margin로를 auto¹. 예 : 대한 flex-direction: row(기본) 당신은 설정해야합니다 margin-right: auto왼쪽에 아이를 정렬 할 수 있습니다.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹이 동작은 Flexbox 사양에 의해 정의됩니다 .

AFAIK에는 사양에 대한 속성이 없지만 여기에 내가 사용한 트릭이 있습니다. 컨테이너 요소 ( display:flex)를 설정 한 justify-content:space-around 다음 첫 번째 항목과 두 번째 항목 사이에 추가 요소를 추가하고 flex-grow:10(또는 일부 설정과 함께 작동하는 다른 값)

편집 : 항목이 단단히 정렬 flex-shrink: 10;되면 여분의 요소에도 추가하는 것이 좋습니다 . 따라서 작은 장치에서는 레이아웃이 올바르게 반응합니다.

실제로 이러한 모든 요소를 ​​형제 노드로 유지하는 데 제한되지 않은 경우 다른 기본 플렉스 상자에 함께있는 요소를 줄 바꿈하여 둘 사이의 컨테이너를 공백으로 사용할 수 있습니다.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

또는 flex-start와 flex-end를 반대로 사용하여 동일한 작업을 수행하는 경우 default-flex 컨테이너와 외로운 자식의 순서를 바꾸십시오.

justify-self곧 브라우저에 오는 것 같습니다 . MDN 에 대한 기사가 이미 있습니다 . 이 글을 쓰는 시점에서 브라우저 지원이 열악합니다.

마진 솔루션과 관련하여 : 간격이있는 Flexbox 그리드가 있습니다. flex-gapFlexbox 에는 속성 이 없습니다 (아직?). 따라서 여백에는 패딩과 여백을 사용하고 있으므로 margin: auto다른 여백을 덮어 써야합니다 ...

원하는 항목의 너비가 필요한 경우 flex-end 알고 플렉스를 "0 0 ## px"로 설정하고 원하는 항목을 설정할 수 flex-start있습니다flex:1

그러면 의사 flex-start항목이 컨테이너를 채우고 형식 만 지정하면됩니다 text-align:left.

내부 항목의 스타일을로 설정하여 비슷한 경우를 해결했습니다 margin: 0 auto.
상황 : 내 메뉴에는 일반적으로 세 개의 버튼이 있으며이 경우에는 버튼이되어야 justify-content: space-between합니다. 그러나 버튼이 하나만 있으면 왼쪽 대신 중앙에 정렬됩니다.