나는 중간에 A B있고 싶습니다 C.
D오른쪽으로 완전히 가려면 어떻게 해야합니까?
전에:
후:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>답변:
이 레이아웃을 달성하기위한 5 가지 옵션은 다음과 같습니다.
flex: 1position: relative플렉스 용기에 바릅니다 .
position: absolute항목 D에 적용하십시오 .
이제이 아이템은 플렉스 컨테이너 안에 절대적으로 위치합니다.
보다 구체적으로, 항목 D는 문서 플로우에서 제거되지만 가장 가까운 위치 조상 의 경계 내에 있습니다.
CSS의 오프셋 속성을 사용 top하고 right위치로이 요소를 이동합니다.
이 방법의 한 가지주의 사항 은 일부 브라우저는 정상 흐름에서 절대 위치 플렉스 항목을 완전히 제거하지 못할 수 있다는 것입니다. 이렇게하면 표준이 아닌 예기치 않은 방식으로 정렬이 변경됩니다. 자세한 내용 : IE11의 정상 흐름에서 절대적으로 배치 된 플렉스 항목이 제거되지 않음
auto여백 과 새로운 보이지 않는 플렉스 아이템의 조합으로 레이아웃을 달성 할 수 있습니다.
새 플렉스 항목은 항목 D와 동일하며 반대쪽 끝 (왼쪽 가장자리)에 배치됩니다.
보다 구체적으로, 플렉스 정렬은 여유 공간의 분포를 기반으로하기 때문에 새 항목은 세 개의 중간 상자를 가로로 가운데에 유지하는 데 필요한 균형을 맞 춥니 다. 새 항목은 기존 D 항목과 너비가 같아야합니다. 그렇지 않으면 가운데 상자가 정확하게 가운데에 배치되지 않습니다.
를 사용하여 새 항목이보기에서 제거됩니다 visibility: hidden.
한마디로 :
D요소 의 복제본을 작성하십시오 .auto유지하기 위해 마진을 A, B와 C함께, 중심 D요소가 양쪽에서 동일한 균형을 만들어.visibility: hidden복제본에 적용D이 방법은 의미 적으로 더 깨끗하고 너비를 D알아야한다는 점을 제외하고 # 2와 유사 합니다.
D.::before.auto유지하기 위해 마진을 A, B그리고 C의사와 함께 완벽 중심 D요소가 양쪽에서 동일한 균형을 만들어.flex: 1왼쪽 및 오른쪽 항목에 추가위의 방법 # 2 또는 # 3으로 시작하여 왼쪽과 오른쪽 항목의 너비가 같아서 균형을 유지하는 대신 걱정하지 마십시오 flex: 1. 이렇게하면 둘 다 사용 가능한 공간을 소비하여 중간 항목을 중앙에 배치합니다.
그런 다음 display: flex컨텐츠를 맞추기 위해 개별 항목에 추가 할 수 있습니다 .
이 방법을 사용하는 방법에 대한 min-height참고 사항 : 현재 Chrome, Firefox, Edge 및 기타 브라우저에서 단축 규칙flex: 1은 다음과 같이 분류됩니다.
flex-grow: 1flex-shrink: 1flex-basis: 0%즉 백분율 단위 (%) 에있는 flex-basis경우의 원인이 방법 깰 min-height용기에 사용된다. 일반적으로 자식의 백분율 높이 height에는 부모 의 명시 적 속성 설정이 필요하기 때문 입니다.
이것은 1998 년으로 거슬러 올라간 오래된 CSS 규칙 ( CSS 레벨 2 )으로 많은 브라우저에서 어느 정도까지 유효합니다. 자세한 내용은 여기 및 여기를 참조 하십시오 .
다음은 user2651804 의 댓글에 게시 된 문제의 예입니다 .
해결책은 백분율 단위를 사용하지 않는 것입니다. 시도 px하거나 아무것도하지 마십시오 ( 적어도 주요 브라우저 중 일부는 어떤 이유로 든 백분율 단위를 추가 했음에도 불구하고 실제로 권장되는 사양입니다 ).
가장 깨끗하고 효율적인 방법 일 수 있습니다. 절대 위치, 가짜 요소 또는 기타 해커가 필요하지 않습니다.
여러 개의 열이있는 그리드를 작성하기 만하면됩니다. 그런 다음 항목을 중간 및 끝 열에 배치하십시오. 기본적으로 첫 번째 열은 비워 두십시오.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>가장 쉬운 방법
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
} <div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>가장 간단한 해결책은 컨텐츠 센터를 부모 컨테이너에 정당화하고 첫 번째 및 마지막 자식 요소에 왼쪽 여백을 자동으로 부여하는 것입니다.
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>이 display:grid접근 방식을 사용하면 모든 ul자식을 동일한 셀에 넣고 다음을 설정할 수 있습니다 justify-self.
ul {
display: grid;
}
ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}<ul>
<span>
<li>A</li>
<li>B</li>
<li>C</li>
</span>
<li>D</li>
</ul>매우 명확한 질문입니다. 몇 시간 동안 발굴 한 후에 답변을 게시 할 수 없었습니다. 우리는 이것을 테이블, 테이블 셀, 절대 위치, 변환으로 해결할 수 있었지만 flexbox로 그냥해야했습니다. :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>방법 # 5 : @Michal Benjamin 의 솔루션 의 CSS 그리드 레이아웃 에서 영감을 얻었으며 Tailwind를 사용하고 있기 때문에 현재 기본적으로 모든 그리드 옵션에 액세스 할 수는 없습니다. 이것은 작동하는 것 같습니다 :
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>추신 : 이와 같이 플렉스와 그리드를 혼합하는 것이 좋은지 확실하지 않습니다!
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>