플렉스 박스 : 내용 맞추기 : 플렉스 엔드

플렉스 박스를 사용하여 컨텐츠 정당화를 구현하는 데 문제가 있습니다. 내 언어와 소셜 미디어 바가 flex 컨테이너에 바로 들어가기를 바랍니다. 크롬을 사용하고 있으므로 코드 스 니펫에 -webkit 접두사가 있습니다. 내가 도대체 뭘 잘못하고있는 겁니까? W3C 사양과 Chrome Dev 도구에 따르면 제 접근 방식은 정확해야하지만 어쩌면 틀 렸습니다.플렉스 박스 : 내용 맞추기 : 플렉스 엔드

답장을 미리 보내 주셔서 감사합니다.

코드 : HTML :

<div id="upBar"> 
     <div id="languagePanel"> 
      <ul> 
       <li><a href="#">Eng</a></li> 
       <li><a href="#">Ger</a></li> 
       <li><a href="#">Fr</a></li> 
      </ul> 
     </div> 
     <div id="media"> 
      <ul> 
       <li><a href="#">FB</a></li> 
       <li><a href="#">mail</a></li> 
      </ul> 
     </div> 
    </div>

CSS :로 : '블록 디스플레이를'

#upBar{ 
    display: -webkit-flex; 
    -webkit-flex-direction: column; 
} 

#languagePanel, #media{ 
-webkit-justify-content: flex-end; 
display: block; 
}

출처

2013-08-07 user1760950

? 이 방법으로 요소를 오른쪽으로 뜨게하는 것은 불가능합니다. Flexbox를 전통적인 방식 (예 : 부동)보다 더 많이 선택한 특별한 이유가 있습니까? 지금은 [XY 문제] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)처럼 보입니다. – cimmanon

변경 '디스플레이 : -webkit-플렉스'는 바로 내부를 통해 두 개의 패널을 이동 컨테이너.

#languagePanel, #media { 
    -webkit-justify-content: flex-end; 
    display: -webkit-flex; 
}

데모 : 당신은 열 방향, 오른쪽 플렉스 항목을 수직으로 쌓아 만드는 것을 이해한다 http://jsfiddle.net/JWNmZ/

출처

2013-08-07 18:03:26

플렉스 박스 : 내용 맞추기 : 플렉스 엔드

답변

관련 문제