플렉스 자식 수를 기준으로 레이아웃을 결정 하시겠습니까?

특정 아동 금액을 기준으로 CSS/HTML을 사용하여 레이아웃을 결정할 수있는 방법이 있습니까?플렉스 자식 수를 기준으로 레이아웃을 결정 하시겠습니까?

레이아웃 예는 아래를 참조하십시오. 모두 만들 수있는 방법이 있는지

나는 n 번째 자녀와 함께 작동하도록 그걸 얻기 위해 시도했지만, 내가 잘못이 일을 할 수있다 ..

https://codepen.io/brycesnyder/pen/EvBzWq

그러나 나는 확실하지 않다 요소의 너비가 50 %이고, 1보다 크면 스택해야합니다.

/* three items */ 
li:first-child:nth-last-child(3):not(:first-child), 
li:first-child:nth-last-child(3) ~ li { 
    background: green; 
}

편집 :이 때문에 같은 표준 요소를 통해 가능하다 알고 정확히 아니에요 ... https://codepen.io/brycesnyder/pen/GvbbyY 난 그냥 UL> LI에게

출처

2017-09-08 Bryce Snyder

뭔가. com/questions/39386259/flexible-flexbox-grid)? – kukkuz

@kukkuz 확실히 도움이됩니다! 나는 정확한 레이아웃 비주얼을 추가하지 못했습니다. 그래서 4 +에 대해서는 오른쪽으로 유지하고 싶지만 그 영역 내에서 스패닝을 계속하고 싶습니다. –

를 사용할 수 있도록하려면 이렇게 " 아이들의 수를 기준으로 "하지만, 플렉스 방향을 컬럼으로 변경하고, 너비를 50 %로 설정하고, 첫 번째 요소가 플렉스를 갖도록하여 원하는 레이아웃을 얻을 수 있습니다. 0 0 100 %. 1 개의 하위 목록 (: first-child : nth-last-child (1))의 특수 경우를 너비 100 %로 설정해야합니다.

주요 CSS는 다음과 같이 찾고 끝 :

ul { 
padding:10px 1px; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 200px; 
    list-style-type: none; 
} 

li { 
    outline:1px solid gray; 
    text-align:center; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    flex: 1 1 auto; 
} 

li:first-child { 
    height: 100%; 
    flex: 0 0 100%; 
} 

/* one item */ 
li:first-child:nth-last-child(1) { 
    width: 100%; 
}

을 여기에 당신에서 포크 나는 설정된 codepen가있다 : // 유래 : [여기] (HTTPS 같은

https://codepen.io/kball/pen/yomyyg

출처

2017-09-08 21:14:56 kball

플렉스 자식 수를 기준으로 레이아웃을 결정 하시겠습니까?

답변

관련 문제