중앙 하나와 오른쪽/왼쪽 정렬 다른 플렉스박스 요소

중앙 하나와 오른쪽/왼쪽 정렬 다른 플렉스박스 요소

는 를 싶습니다.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>

https://jsfiddle.net/z44p7bsx/

다음은 이 레이아웃을 달성하기 위한 5가지 옵션입니다.

• CSS 포지셔닝
• 인비저블 DOM 요소가 포함된 Flexbox
• 투명 유사 요소가 포함된 Flexbox
• 플렉스박스(와)flex: 1
• CSS 그리드 레이아웃

---

방법 #1: CSS 포지셔닝 속성

적용합니다.position: relative플렉스 컨테이너에 연결합니다.

적용합니다.position: absoluteD 항목으로

이제 이 아이템은 플렉스 컨테이너 안에 절대적으로 자리 잡았습니다.

보다 구체적으로, 항목 D는 문서 흐름에서 제거되지만 가장 가까운 위치의 상위 항목의 범위 내에 유지됩니다.

를 사용합니다.top그리고.right이 요소를 위치로 이동시킬 수 있습니다.

li:last-child {
  position: absolute;
  top: 0;
  right: 0;
  background: #ddd;
}
ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p {
  text-align: center;
  margin-top: 0;
}
span {
  background-color: aqua;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

이 방법에서 주의해야 할 점은 일부 브라우저가 정상 흐름에서 절대 위치 플렉스 항목을 완전히 제거하지 못할 수 있다는 것입니다.이렇게 하면 비정규적인 예상치 못한 방법으로 선형이 변경됩니다.상세내용 : 절대위치 플렉스 아이템은 IE11에서 정상 흐름에서 제거되지 않음

---

방법 #2: Flex Auto Margines & Invisible Flex Item (DOM 요소)

여백과 보이지 않는 새로운 플렉스 아이템의 조합으로 레이아웃을 달성할 수 있습니다.

새 플렉스 항목은 항목 D와 동일하며 반대쪽 끝(왼쪽 가장자리)에 배치됩니다.

보다 구체적으로 플렉스 정렬은 여유 공간의 분포를 기반으로 하기 때문에 세 개의 중간 상자를 수평으로 중심을 유지하는 데 필요한 균형입니다.새 아이템은 기존 D 아이템과 같은 폭이어야 합니다, 그렇지 않으면 중간 박스의 중심이 정확하지 않습니다.

하면 새 항목이 됩니다.visibility: hidden.

간단히 말해서:

• 의 .D요소.
• 목록의 맨 처음에 배치합니다.
• 플렉스 사용autoA,B그리고.C는 모두 ,D요소가 양쪽 끝에서 동일한 균형을 만듭니다.
• 적용합니다.visibility: hiddenD

li:first-child {
  margin-right: auto;
  visibility: hidden;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>D</li><!-- new; invisible spacer item -->
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

방법 #3: Flex Auto Margines & Invisible Flex Item (가짜 요소)

이 는 #2 의 제외하면 합니다.D반드시 알아야 합니다.

• 너비를 D.
• 로 .::before.
• 플렉스 사용autoA,B그리고.C다에 을 잡았습니다.D요소가 양쪽 끝에서 동일한 균형을 만듭니다.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

#4 flex: 1

의 Method 또는 # 동일한 의 를 됩니다. Method #2 #3 부터하여, , .flex: 1이렇게 두 모두 한 공간을 을 중심으로 사용할 수 있습니다 이렇게 하면 두 사람 모두 사용 가능한 공간을 사용하게 되므로 중간 항목을 중심으로 사용할 수 있습니다.

그러면 추가할 수 있습니다.display: flex각 항목의 내용을 정렬할 수 있습니다.

다음과 함께 이 메서드를 사용하는 것에 대한 참고: 현재 Chrome, Firefox, Edge 및 가능한 다른 브라우저에서는 속기 규칙을 사용합니다.flex: 1다음으로 나눕니다.

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

해당 백분율 단위(%)( 에)flex-basis이 메서드는 때 됩니다.min-height컨테이너에 사용됩니다.입니다를 height상위 항목에 속성을 설정합니다.

이것은 1998년(CSS 레벨 2)까지 거슬러 올라가는 오래된 CSS 규칙으로, 여전히 많은 브라우저에서 어느 정도 유효합니다.자세한 내용은 여기와 여기를 참조하십시오.

다음은 사용자 2651804가 댓글에 게시한 문제의 예시입니다.

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container>div {
  background: orange;
  margin: 5px;
}

#flex-container>div:first-child {
  flex: 1;
}

#flex-container::after {
  content: "";
  flex: 1;
}

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

해결책은 백분율 단위를 사용하지 않는 것입니다. 시도해 보세요.px또는 전혀 그렇지 않습니다(어떤 이유로든 적어도 일부 주요 브라우저가 백분율 단위를 추가했음에도 불구하고 사양이 실제로 권장하는 바입니다).

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container > div {
  background: orange;
  margin: 5px;
}


/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */

#flex-container > div:first-child {
  flex: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex: 1;
  flex-basis: 0;
}


/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY

#flex-container > div:first-child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
 */

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

---

IMT2000 3GPP - CSS 그리드 레이아웃

이것이 가장 깨끗하고 효율적인 방법일 것입니다.절대 위치, 가짜 요소 또는 기타 해킹이 필요하지 않습니다.

여러 열로 된 그리드를 작성하기만 하면 됩니다.그런 다음 항목을 가운데 열과 끝 열에 배치합니다.기본적으로 첫번째 열은 비워 둡니다.

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>

가장 간단한 해결책은 콘텐츠 센터를 상위 컨테이너에 정당화하고 첫 번째와 마지막 자식 요소에 여백 왼쪽 자동을 부여하는 것입니다.

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>

가장 쉬운 방법

.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>

으로.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;
}

<div class='ul'>
  <span>
     <span class='li'>A</span>
     <span class='li'>B</span>
     <span class='li'>C</span>
  </span>
  <span class='li'>D</span>
</div>

정렬하려면 빈 스판을 부착하고 세 개의 자식 스판을 분할하면 됩니다.

메소드 #5: @Michal Benjamin's 솔루션의 CSS 그리드 레이아웃에서 영감을 얻어 Tailwind를 사용하고 있으며 현재까지 기본적으로 모든 그리드 옵션에 액세스할 수 없습니다.작동하는 것 같습니다.

ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

li {
  align-self: center;
}

li:nth-child(1) {
  justify-content: flex-start; /* OR margin-right: auto */
}

li:nth-child(3) {
  justify-content: flex-end; /* OR margin-left:auto */
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

추신: 플렉스와 그리드를 이렇게 섞는 것이 좋은 생각인지 확실하지 않습니다!

가장 쉬운 방법:

.wrap {
    display:flex;
}
.full-width {
    width: 100%;
}
.centered {
    display: flex;
    justify-content:center;
}
.btn {
    display: flex;
    justify-content: end;
}

<div class="wrap">
   <div class="full-width"></div>
   <div class="full-width centered">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   <div class="full-width btn">D</div>
 </div>

아주 명확한 질문입니다.나는 몇 시간 동안 땅을 파다가 답을 올리지 않을 수 없었습니다.테이블, 테이블 셀, 절대 위치, 변환으로 해결할 수 있었지만 flexbox로 해결할 수 밖에 없었습니다. :)

.parent {
  display: flex;
  justify-content: flex-end;
}

.center {
  margin: auto;
}

http://codepen.io/rgfx/pen/BLorgd

그리드 템플릿 영역을 사용하고 가짜 요소 없이 수행할 수 있기 때문에 허용된 답변을 약간 변경할 수 있습니다.

grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr

Michael_B의 답변을 확대했습니다.

.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>Center</li>
    <li>this</li>
  </span>
  <span>
    <li>Accusamus</li>
    <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>Center</li>
    <li>this</li>
  </span>
  <span>
    <li>Accusamus</li>
    <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>Accusamus</li>
    <li>Porro</li>
    <li>Culpa</li>
    <li>Sit</li>
  </span>
  <span>
    <li>Center</li>
    <li>this</li>
  </span>
</ul>

<br><br>
1 of 1
<ul class="center-flex__1-of-1">
  <span>
    <li>Center</li>
    <li>this</li>
  </span>
</ul>

코드펜으로서 SASS의 도움으로 여기에

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>

언급URL : https://stackoverflow.com/questions/38948102/center-one-and-right-left-align-other-flexbox-element