이 CSS3를 향상시키고 동일한 효과를 얻으십시오 - flexbox 수직 맞춤 텍스트

Question

새로운 css3 기술 중 일부를 사용하여 수직 탐색 메뉴를 만들려고하고 있지만 지금까지는 display:table으로 원하는 모양에 가장 근접 할 수 있습니다. 나는 display:table/table-row/table-cell을 사용하는 것을 좋아하지 않습니다. 왜냐하면 주로 "셀"을 표 형식으로 제한하기 때문에 (예 : 여백으로 "행"또는 "셀"을 공백으로 표시 할 수 없음) 여분의 divs만을 제공하고 싶습니다. 목록을 수직으로 만드십시오. 제가 원래이 방향으로 갔던 이유는 텍스트에 vertical-align: middle을 사용했기 때문입니다. 플렉스 박스 (flex box) 방법을 사용해 보았을 때 두 줄의 텍스트를 같은 줄에 넣었고 어떻게 나누는 지 알아낼 수 없었습니다.

동일한 모양을 얻을 수 있지만 더 많은 유연성을 제공하고 더 이상 div를 추가하지 않는 것이 좋습니다.

display: table 방법의 예 작업 (완벽하지만 중앙에 나타나지 않습니다) : http://jsfiddle.net/jKRDQ/

가장 가까운 I 플렉스 박스 방법을 사용했다 : http://jsfiddle.net/4wSN5/ 가장 가까운

CSS3없이 : http://jsfiddle.net/6gRcp/

Answer 1

테이블 방법을 잘못된 태그가 있습니다 : li 요소는 ul 또는 ol 요소의 하위 요소 일 수 있습니다. 추가 div이 필요하면 li 안에 있어야합니다.

플렉스 박스 방법이 누락되었습니다. box-orientation/flex-direction입니다. 오류가 발생하면 horizontal/row으로 설정되어 모든 행이 표시됩니다. 당신의 li의 CSS는 다음과 같이한다 :

http://jsfiddle.net/4wSN5/1/

#slide-out-menu li { 
    width: 75px; 
    height: 75px; 
    border: 1px solid black; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-flex-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

다른 방법으로, 당신은 horizontal/row 오리엔테이션에 체재하고 포장을 사용하지만, 그 것 수 있었다 단지 표준을 지원하는 브라우저에서 작동 spec (실험적 Flexbox 지원이 설정된 Firefox는 제외).

Firefox의 접두사를 삭제해야 할 수 있습니다. 구현이 잘못되어 있기 때문입니다. 나의 Sass 믹스 인이 그들을 방출하기 때문에 나는 그들을 포함 시켰습니다.

Flexbox를 사용하려는 경우 은 결코 속성을 사용하지 마십시오. Opera와 Chrome (둘 다 -webkit- 접두어 아래에 있음)은 구 사양과 신 사양 모두를 지원하지만 (Opera는 새로운 사양에 대해 접두어가 붙지 않습니다), 이전 버전은 결국 삭제됩니다.