CSS : Flexbox 내의 Flexbox

나는 flexboxes로 조금 놀았으며 열과 행 컨테이너를 결합하려고했습니다. 내가 가진 질문은 다음과 같습니다.CSS : Flexbox 내의 Flexbox

열에 배치 된 행 요소가 플렉스 컨테이너의 전체 너비에 미치지 않는 이유는 무엇입니까?

예제 코드는 여기에 표시됩니다 : js-fiddle

HTML : 어떤 도움

/* CSS: */ 
 

 
.flex-container { 
 
    color: blue; 
 
    background-color:yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 
.horizontal { 
 
    flex-direction:row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction:column; 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal" > 
 
    <div class=flex-item>3a </div> 
 
    <div class=flex-item>3b </div> 
 
    <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

감사합니다!

출처

2016-11-29 Raphael Kleindienst

당신의'.horizontal' 컨테이너가없는 충분히 넓은이기 때문입니다. '너비 : 100 %; '를 추가하십시오. – Roberrrt

글쎄 그게 꽤 간단했다;) 나는 그걸 시도했다고 생각했는데 .. –

안녕하세요, 미안 해요. 커피가 아직 쫓겨나지 않았다. 나는 또한 너비가 자동으로 제한되지 않는 이유를 실제로 알지 못하므로 솔루션을 찾을 때까지 주석으로 게시합니다. – Roberrrt

이것은 Flexbox의 작동 방식 때문입니다.

컨테이너는 flex 자식 그 자체이므로 다른 자식의 크기로 자동 조정됩니다. .horizontal 자체의 하위 항목 인 넘치는 내용의 공간 만 허용합니다.

수동으로 항목에 대해 작성되는 공간에서 발생합니다 폭을 적용하고, justify-content: space-between는에 시작된다

솔루션은 다음과 같은 규칙을 변경합니다.

.horizontal { 
    flex-direction: row; 
    background-color: red; 
    width: 100%; 
}

출처

2016-11-29 10:35:17 Roberrrt

감사합니다. 그러면 원하는 결과가 생성됩니다. Danield의 솔루션은 넓은 행을 생성하지만 더 이상 가운데 정렬되지 않습니다. –

을 당신이에 align-items:center;을 설정 한 이후 플렉스 컨테이너는 중심에 놓이게 될뿐만 아니라 항목이 필요한 최소 공간 만 차지합니다.

이 속성을 설정하지 않은 경우 기본값 stretch이 실행되어 항목이 전체 너비를 차지합니다.

그렇다면 @Michael_B가 지적한 것처럼 플렉스 아이템에 align-self:center을 적용하여 교차 축에 아이템을 집중시킬 수 있습니다.

.flex-container { 
 
    color: blue; 
 
    background-color: yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.horizontal { 
 
    flex-direction: row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction: column; 
 
} 
 

 
.flex-item { 
 
    align-self: center; 
 
    /* center each flex item along the cross axis */ 
 
    text-align: center; 
 
    /* horizontally center content within flex item */ 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal"> 
 
     <div class=flex-item>3a </div> 
 
     <div class=flex-item>3b </div> 
 
     <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

출처

2016-11-29 11:27:32 Danield

'.horizontal'에'align-items : stretch'를 적용하는 것이 왜 효과가 없습니까? – Roberrrt

@Roberrrt 발생하는 스트레칭이 ** 교차 축 **에 있다는 점을 제외하고는 '작동'합니다. 따라서 플렉스 방향이 열일 때 - 스트레칭이 수평으로 발생하고 플렉스 방향이 행 일 때 - 스트레칭이 수직으로 발생합니다 – Danield

이 대답은 추론을 못살게 굴 힙니다. 순수한 플렉스 솔루션의 경우 컨테이너에서'align-items : center'를 제거하십시오. 중앙 정렬하려는 flex 아이템에'align-self : center'를 추가하십시오. 중간 항목 (3a/b/c)은 기본적으로 늘어납니다 : https://jsfiddle.net/cq0ecd5u/2/ –

CSS : Flexbox 내의 Flexbox

답변

관련 문제