유연한 항목을 올바르게 띄우기

유연한 항목을 올바르게 띄우기

나는 있습니다

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

부모님이 가지고 계신

.parent {
    display: flex;
}

첫째 아이의 경우, 저는 물건을 오른쪽으로 띄우기만 하면 됩니다.

그리고 부모님이 정해준 유연한 규칙을 따르는 나의 다른 div들.

이것이 가능한 일입니까?

그렇지 않은 경우 어떻게 해야 합니까?float: right휘어진 상태에서?

사용할 수 없습니다.float플렉스 컨테이너 내부 및 그 이유는 float 속성이 여기에서 보는 것처럼 플렉스 레벨 박스에 적용되지 않기 때문입니다.

그래서 당신이 위치를 정하고 싶다면,child의 오른쪽 요소.parent사용할 수 있는 요소margin-left: auto그러나 지금.child요소는 다른 요소도 밀어넣습니다.div여기 보시는 바와 같이 오른쪽으로.

지금 할 수 있는 일은 요소의 순서를 변경하고 설정하는 것입니다.order: 2에child두 번째 디브에 영향을 미치지 않는 요소

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}

<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

플로트는 필요 없습니다.사실, 그것들은 플렉스 박스에서 플로트가 무시되기 때문에 쓸모가 없습니다.

또한 CSS 포지셔닝이 필요하지 않습니다.

몇 가지 유연성 방법을 사용할 수 있습니다. 마진은 다른 답변에서 언급되었습니다.

다음 두 가지 다른 옵션이 있습니다.

• 사용하다justify-content: space-between그리고order소유물.
• 사용하다justify-content: space-between그리고 디브의 순서를 뒤집습니다.

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}

<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>

사용하다justify-content: flex-end;상위 항목:

display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;

추가 정보

display: flex;
flex-wrap: wrap;
justify-content: space-between;

언급URL : https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right