[html] CSS3 Flex : 자식을 오른쪽으로 당기기

Program / 글쓴이

여기 내가 가지고있는 것이 Fiddle

ul {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #333;
  padding: 15px;
}

ul li {
  padding: 15px;
  margin: 5px;
  background: #efefef;
  border: 1px solid #ccc;
  display: inline-block;
  list-style: none;
}

#item-1 {
  height: 50px;
}

#item-2 {
  height: 70px;
}
<ul>
  <li id="item-1">Home</li>
  <li id="item-2">Menu</li>
  <li>More</li>
  <li>Stuff</li>
  <li>Settings</li>
</ul>

스 니펫 확장

다른 모든 항목은 그대로 유지하면서 플렉스 박스 내부의 마지막 항목을 오른쪽 (제 바이올린의 “설정”) 으로 가져 오길 원합니다 . “설정”항목은 수직으로 중앙에 배치되어야합니다.

align-self: flex-end 항목을 아래쪽으로 밉니다 (오른쪽에 표시합니다).

항목의 높이가 가변적이고 항상 수직으로 중앙에 위치해야하기 때문에 플렉스 박스를 사용하는 솔루션을 선호합니다.

이것을 달성하는 가장 깨끗한 방법은 무엇입니까?

당신의 도움을 주셔서 감사합니다!

답변

간단한 수정, 자동 조정 여백 사용 :

ul li:last-child {
    margin-left: auto;
}

width: 100%요소가 가시 영역 내에 유지되도록 사용하지 않을 수도 있습니다 .

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

http://jsfiddle.net/dwLHE/

참조 https://www.w3.org/TR/css-flexbox-1/#auto-margins

답변