당신은 대체 할 수 있습니다 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-gap
Flexbox 에는 속성 이 없습니다 (아직?). 따라서 여백에는 패딩과 여백을 사용하고 있으므로 margin: auto
다른 여백을 덮어 써야합니다 …
답변
원하는 항목의 너비가 필요한 경우 flex-end
알고 플렉스를 “0 0 ## px”로 설정하고 원하는 항목을 설정할 수 flex-start
있습니다flex:1
그러면 의사 flex-start
항목이 컨테이너를 채우고 형식 만 지정하면됩니다 text-align:left
.
답변
내부 항목의 스타일을로 설정하여 비슷한 경우를 해결했습니다 margin: 0 auto
.
상황 : 내 메뉴에는 일반적으로 세 개의 버튼이 있으며이 경우에는 버튼이되어야 justify-content: space-between
합니다. 그러나 버튼이 하나만 있으면 왼쪽 대신 중앙에 정렬됩니다.