단일 Flexbox 항목을 정당화하는 방법(정당화 내용 재정의)

단일 Flexbox 항목을 정당화하는 방법(정당화 내용 재정의)

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS Flexbox에서 "justify-items" 및 "justify-self" 속성이 없는 이유는 무엇입니까? (6개 답변)

마감됨1년 전에.

오버라이드할 수 있습니다.align-items와 함께align-self플렉스 아이템의 경우.나는 그들을 무시하는 방법을 찾고 있습니다.justify-content플렉스 아이템의 경우.

Flexbox 컨테이너가 있는 경우justify-content:flex-end하지만 당신은 첫 번째 아이템을 원합니다.justify-content: flex-start어떻게 그럴 수 있습니까?

없는 것 같습니다.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">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를 반대로 사용하여 동일한 작업을 수행하는 경우 기본 Flex 컨테이너와 단독 자식의 순서를 교환합니다.

비슷한 사례를 이너 아이템의 스타일을 로 설정하여 해결하였습니다.margin: 0 auto.
상황:내 메뉴에는 보통 세 개의 버튼이 포함되어 있는데, 이 경우에는 버튼이 필요합니다.justify-content: space-between그러나 버튼이 하나만 있으면 왼쪽이 아니라 가운데에 정렬됩니다.

원하는 항목의 너비가 있는 경우flex-end알려진 경우, "00##flex"로 플렉스를 설정하고 원하는 항목을 설정할 수 있습니다.flex-start와 함께flex:1

이로 인해 유사 현상이 발생합니다.flex-start컨테이너를 채울 항목, 형식을 지정합니다.text-align:left뭐 그런 거.

Pavlo의 답변 https://stackoverflow.com/a/34063808/1069914, 을 확장하려면 여러 하위 항목을 가질 수 있습니다.justify-content: flex-start그들의 행동에서 그러나 마지막 항목을 가지고 있습니다.justify-content: flex-end

.container {
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;
}

.container > *:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}

/* set the second to last-child */
.container > :nth-last-child(2) {
    margin-right: auto;
    margin-left: 0;
}

.block {
  width: 50px;
  background: tomato;
  border: 1px solid black;
}

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>

언급URL : https://stackoverflow.com/questions/23621650/how-to-justify-a-single-flexbox-item-override-justify-content