display: flex 에서 float: left, right가 먹히지 않을 때

You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle.

So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle.

What you can do now is change order of elements and set (order: 2) on child element so it doesn't affect second div



flex container안에서 float는 사용할 수 없으며 float 속성은 여기 Fiddle에서 볼 수 있듯이 flex-level 박스에 적용되지 않기 때문입니다.

따라서 자식 요소를 부모 요소의 오른쪽에 배치하려면 margin-left: auto를 사용할 수 있지만 이제 자식 요소는 여기 Fiddle에서 볼 수 있듯이 다른 div도 오른쪽으로 밀어줍니다.

지금 할 수 있는 것은 요소의 순서를 변경하고 순서를 설정하는 것입니다:  자식 요소에 order: 2 속성으로

그렇기 때문 두번째 div 영향을 주지 않는다. 

Fiddle https://jsfiddle.net/Lg0wyt9u/272/https://jsfiddle.net/Lg0wyt9u/272/

Edit fiddle - JSFiddle - Code Playground

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

위와 같이 쓰도록!

 

출처: https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right

Making a flex item float right