flexbox 모델의 자동 내부 여백

새로운 Flexible Box 레이아웃 모델에 대한 질문입니다.flexbox 모델의 자동 내부 여백

display: flex;이있는 컨테이너 내부에는 두 개의 항목이 있다고 가정합니다. 컨테이너가 충분히 넓 으면 두 항목이 수평으로 배치됩니다. 그렇지 않으면 플렉스 박스 레이아웃 메 커니 즘이 세로로 쌓입니다. 두 항목이 서로 옆에있을 때 두 항목 사이에 안쪽 여백을 두는 것이 좋습니다. 그러나이 여백을 서로 위에 겹쳐 놓아야 할 때 사라지게하고 싶습니다.

FlexBox 모델에서 가능합니까?

<!DOCTYPE html> 
<title>Flex Box</title> 
<style> 
    body { 
     font-size: 100px; 
    } 
    .container { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-wrap: wrap;  
     flex-wrap: wrap; 
    } 
</style> 
<div class="container"> 
    <p> 
     One 
    </p> 
    <p> 
     Two 
    </p> 
</div>

외부 DIV 충분한 수평 공간이, "한"과 "2 :

는 예를 들어, 하나는 최근 크롬의 버전으로 테스트되었습니다 다음 문서를 사용할 수 있습니다 "는 서로 사이에 공백없이 나란히 표시됩니다. 브라우저 창을 축소하자마자 둘 다 세로로 쌓입니다. 두 단락을 서로 옆에있는 여백으로 구분하고 싶습니다.

http://jsfiddle.net/WHYS2/

출처

2012-11-05 Marc

이것은 부분적으로 만 가능합니다. Media Queries과 협력해야합니다.

다음 예제에서 두 상자는 서로 옆에 있지만 공간이 충분하지 않으면 (인스턴스의 경우 브라우저의 뷰포트가 800px보다 작 으면) 상자가 서로 중첩됩니다.

이 데모를 http://jsfiddle.net/tjNhF/에 게시하고 브라우저 창 크기를 조정하십시오.

HTML :

<div class="box"> 
    <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tellus non dui eleifend viverra. Proin quis nunc purus. Suspendisse at quam nisl, nec posuere mi. Donec nec nisi eros. Fusce vel orci quam. Cras urna arcu, hendrerit in consequat in, faucibus vitae nulla. Donec a urna risus. Proin posuere. </p> 
    </div> 
    <div> 
     <p>Nulla magna felis, facilisis vel adipiscing et, bibendum ac tellus. Pellentesque in risus in leo scelerisque adipiscing quis ut augue. Etiam luctus nisi sit amet nulla ullamcorper quis commodo purus volutpat. Sed est nisl, facilisis non vestibulum sed, auctor et odio. Aenean eget neque urna, a hendrerit ipsum. Sed sollicitudin.</p> 
    </div> 
</div>

CSS :

단락은, 같은 라인에있는 당신을

@media all { 
    body { 
     background-color: #aaffaa; 
    } 

    .box { 
     width: 100%; 
     border: 1px solid #555; 

     display: -webkit-box; 
     -webkit-box-orient: horizontal; 

     display: -moz-box; 
     -moz-box-orient: horizontal; 

     display: box; 
     box-orient: horizontal; 
    } 

    .box > div { 
     padding: 1em 5em; 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
     box-flex: 1; 
    } 

    .box > div:nth-child(1){ background : #abc; } 
    .box > div:nth-child(2){ background : #bca; } 
} 

@media (max-width: 800px) { 
    body { 
     background-color: #ffaaaa; 
    } 

    .box { 
     box-orient: vertical; 
     -webkit-box-orient: vertical; 
     -moz-box-orient: vertical; 
    } 
    .box > div { 
     padding-left: 0; 
     padding-right: 0; 
    } 
}

출처

2012-11-05 13:39:56 Jan

데모를 설정해 주셔서 감사합니다. 물론 미디어 쿼리를 사용하는 것도 옵션이지만 내부 항목의 너비를 모르는 경우 유용하지 않습니다. 또한 축의 한 라인을 따라 충분한 공간이 없을 때 플렉스 박스 모델이 자동으로 주축을 파괴하기 시작하므로 "손으로"수직 방향으로 전환 할 필요는 없습니다. 그런데, 당신은 구식의 flexbox 모델을 사용하고 있습니다 만, 현재의 W3C 권고안은 아마도 기능을 많이 추가하지 않을 것입니다. – Marc

코드와 플렉스 박스 버전을 적용 할 수 있도록 기존 코드를 첫 번째 게시물에 추가 할 수 있습니다. – Jan

그래 :-) 아마 이전에 했어야했다. – Marc

후 고정 폭 그들 사이의 여백과 줄에 여분의 공간을 원하는 두 번째 단락의 오른쪽에 추가 했습니까? 또는 첫 번째를 왼쪽에 고정하고 두 번째를 오른쪽에 고정하고 그 사이에 가변 폭 여백을 넣으시겠습니까? 단락의 내용을 기준으로 단락의 너비를 지정 하시겠습니까?

단락을 두 줄로 줄이면 해당 내용의 내용을 기반으로 너비를 원할지 아니면 각 줄의 100 %를 채우기를 원할 때마다 늘리시겠습니까?

출처

2012-11-09 01:57:25 zomigi

현재 염두에 두어야 할 것은 단락의 너비는 내용을 기반으로해야하며 줄의 여백은 두 번째 단락의 오른쪽에 추가해야합니다. 단락이 두 줄로 감싸는 경우에도 동일합니다 (예 : 오른쪽 여백). – Marc

flexbox 모델의 자동 내부 여백

답변

관련 문제