flexbox 포장 열을 뒤집어 놓습니다.

Question

오늘 제가 만든 '탭'HTML 기즈모를보고 있었는데, 인라인 블록을 사용하여 탭 머리글을 배치 한 이후에 포장했을 때 '이런 식으로 뭔가를보고 출력을 얻을 D :

 
    +-------+ +--------+ +--------+ +------+ +------------+ +-----+ 
    | Apple | | Banana | | Cherry | | Date | | Elderberry | | Fig | 
    +-------+ +----------+ 
    | Grape | | Honeydew | 
--+  +-------------------------------------------------------------- 

문제 없음, 나는 생각했다 : 두 번째 행이 위 처음 들어가도록 내가 더 깔끔하게 마무리하기 위해 인 flexbox을 사용할 수 있습니다 내기 있도록 다음과 같이 사용자의 첫 번째 행의 '뒤'인 것처럼 보입니다.

완벽하지는 않지만 나쁜 것은 아닙니다. Windows에서 Tab 컨트롤이하는 일을 모방합니다.

그래서 몇 줄의 플렉스 CSS를 해킹하고 플렉스 박스 프로퍼티에 행이 아래에서 위까지가는 것을 지정하는 것이 무엇이든 추가해야합니다. . 나는이에 도착 :

ul.fruits { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
    align-items: flex-end; 
    align-content: flex-end; 
} 

사양 물론, 교차 축이 쓰는 방향 (link to W3C spec) 일치하는지 말한다. 그리고 writing-mode: horizontal-bt을 추가하여 CSS 하단에 writing-mode이 없으므로 (link to W3C spec)에 추가 할 수 없음을 깨달았습니다.

나는 역순으로 줄을 감은 단락에 대한 요구가 많지 않다는 것을 알았지 만, 때때로 유용한 것으로 보이며, 스펙에는 존재하지 않는 것처럼 보입니다.

(가능한 해키 솔루션 : ". 그냥 작동"나는 CSS는 컨테이너를 뒤집어 후 내 요소를 다시 플립 변환 사용할 수도있을 것 같군요하지만이해야 뭔가 경찰 아웃 것 같아)

그렇다면 플렉스 박스로 행을 감아 가로축을 (반대로의 쓰기 모드에서 지정한 방향)으로 바꾸는 방법에 대한 좋은 아이디어가 있습니까? 심지어 가능할까요?

---

(노는 JSFiddle 예는 여기에서 찾을 수 있습니다 : https://jsfiddle.net/seanofw/Lk9wyL9s/)

Answer 1

시도 :

flex-flow: row wrap-reverse 

Revised Fiddle

5.2. Flex Line Wrapping: the flex-wrap property

연성 용기 한 줄 또는 여러 줄, 새로운 라인이 적층되는 방향을 결정 상호 축 방향인지

flex-wrap 속성 제어.

nowrap

플렉스 컨테이너는 단일 라인입니다.

wrap

플렉스 용기 멀티 라인이다. 랩과 동일

wrap-reverse

.

wrap-reverse 아닌 값

크로스 스타트 방향 는 (교차 축 중) 현재의 기록 모드의 인라인 시작 또는 블록 시동 방향 및 교차하거나 동등 종 방향은 교차 시작의 반대 방향입니다.

flex-wrap이 wrap-reverse 일 때 교차 시작 및 교차 끝 방향이 바뀝니다.