Flexbox 및 Internet Explorer 11 (display : flex in <html>?)

117

나는 "floaty"레이아웃에서 벗어나 향후 프로젝트를 위해 CSS flexbox를 사용할 계획입니다. 현재 버전의 모든 주요 브라우저가 (어떤 방식 으로든) 플렉스 박스를 지원하는 것 같아서 기뻤습니다.

몇 가지 예를보기 위해 "Solved by Flexbox" 로 이동했습니다. 그러나 "고정 바닥 글"예제는 Internet Explorer 11에서 작동하지 않는 것 같습니다. 나는 약간 놀았고 display:flex다음 <html>과 같이 추가 하여 작동 width:100%하도록했습니다.<body>

그래서 첫 번째 질문은 : 누구든지 그 논리를 나에게 설명 할 수 있습니까? 나는 그냥 돌아 다니며 작동했지만 왜 그렇게 작동 했는지 이해하지 못합니다 ...

그런 다음 Internet Explorer를 제외한 모든 브라우저에서 작동하는 "미디어 개체"예제가 있습니다. 나도 그것으로 놀았지만 성공하지 못했다.

따라서 두 번째 질문은 Internet Explorer에서 "미디어 개체"예제를 사용할 수있는 "깨끗한"가능성이 있습니까?

— Kodekan
소스

1

이 오래된 질문에 대한 업데이트입니다. 연결된 데모는 IE11에서 잘 작동합니다. 이 질문을받은 후 3 년 동안 버그가 수정 된 것 같습니다.

— Daryl

151

http://caniuse.com/#feat=flexbox 에 따르면 :

"에 대한 IE10 및 IE11 기본값 flex은 2013 년 9 월 기준 초안 사양에 따라이 0 0 auto아닙니다 0 1 auto."

즉, CSS 어딘가에 다음과 같은 내용이 있으면 flex:1모든 브라우저에서 동일한 방식으로 번역되지 않습니다. 로 변경 1 0 0해보면 작동하는 것을 즉시 볼 수있을 것입니다.

문제는이 솔루션이 아마도 파이어 폭스를 엉망으로 만들 것이라는 것입니다.하지만 몇 가지 해킹을 사용하여 Mozilla 만 대상으로하고 다시 변경할 수 있습니다.

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

flexbox공식이 아닌 W3C 후보 이기 때문에 브라우저는 다른 결과를 제공하는 경향이 있지만 조만간 변경 될 것 같습니다.

누군가가 더 나은 답을 가지고 있다면 알고 싶습니다!

— Odisseas
소스

1

IE10이 필요 -ms-flex: 1 0 0;하고 IE11 flex: 1 0 0;..?

— Eystein 2014

19

Chrome 39를 사용하면 갑자기 작동이 중단되었습니다. 추적하는 데 나이가 들었지만 세 번째 숫자의 사양이었습니다. Chrome 39는 flex: 1 0 0;. 그러나 flex: 1 0 0%;( % 참고 ) 또는 작동합니다. flex: 1 0 auto;

— Eystein 2014

예, 이것은 사실입니다. 그것은 내 디자인의 일부도 망가 뜨 렸습니다! 나는에 간단하게 변경하여 고정 flex: 1;...하지만, 나는 그것이 당신이려고하고있는 무슨에 따라 달라집니다 것 같아요

— Odisseas

1

IE11의 핵심 문제는 계산 방식 flex-basis입니다. Github에서이 왜 좋은 토론이 flex:1 0 100%동안 IE11에 대한 몇 가지 경우에 작동 flex: 1 0 0%또는 flex: 1 0 auto다른 사람에서 작동합니다. 콘텐츠를 미리 알아야합니다.

— P.Brian.Mackey

에서 caniuse.com/#feat=flexbox 이를 구체적 IE 11 번째 인수에 추가하는 수단, 플렉스 기초 속성 .. 필요로 알려진 문제점 언급

— 헨리 네오에게

49

다른 플렉스 컨테이너를 사용하여 min-heightIE10 및 IE11 의 문제 를 해결합니다 .

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

작동하는 데모를 참조하십시오 .

flexbox 레이아웃을 직접 사용하지 마세요. bodyjQuery 플러그인 (자동 완성, 팝업 등)을 통해 삽입 된 요소를 망치기 때문입니다.
바닥 글이 창 하단에 붙어 긴 내용에 적응 하지 못 하므로 컨테이너에 height:100%또는 height:100vh을 사용하지 마십시오 .
사용 flex-grow:1보다는 flex:1위한 IE10 및 IE11 기본값 원인 flex입니다 0 0 auto하지 0 1 auto.

— BeliG
소스

3

부작용을 피하기 위해 추가 flex-direction: column해야 .ie-fixMinHeight한다는 것을 알았습니다 . IE 전용 HTML이없는 경우 사용할 수 있습니다.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

나는 이것이 2 살이라는 것을 알고 있지만 감사합니다! 나는이 stackoverflow.com/a/24979148/359157 을 따르고 있었고 Edge와 Chrome이 완벽하게 작동하는 동안 IE가 파열 된 이유를 알아 내려고 영원히 싸웠습니다. height대는 min-height핵심이었다.

— TyCobb

39

당신은 단지 필요합니다 flex:1; IE11의 문제를 해결합니다. 나는 두 번째 Odisseas. 또한 html, body 요소에 100 % 높이를 할당합니다 .

CSS 변경 :

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

작동 URL : http://jsfiddle.net/3tpuryso/13/

— 아쇽 쿠마르 굽타
소스

이 문제에 대해 자세히 설명해 주시겠습니까? IE에서 "미디어 개체"예제를 작동시킬 수있는 "깨끗한"가능성이 있습니까?

— Ashok Kumar Gupta

1

이것은 나를 위해 작동합니다. 내가 발견 한 한 가지는 (그것이 나를 잡았 기 때문에) 당신이 포함하는 요소를 가지고 있다면, display: flex;그리고 관련 스타일 이 와 컨테이너 모두에 적용되어야한다는 것입니다 body: jsfiddle.net/Skateside/nezdrrkr

— James Long

html 높이를 100 %로 설정하면의 콘텐츠가 main제대로 성장하지 않는 것처럼 보입니다 (최소한 크롬에서는). 충분한 콘텐츠를 추가하면 바닥 글이 넘칠 것입니다. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth 지금은 기본적으로 픽셀이 아닌 100 %로 성장하라고 말하고 있습니다. 당신은 설정해야합니다 html에 min-height: 100%콘텐츠와 함께 따라, 대신

— Odisseas

감사! 나에게 빠진 부분은 실제로 flex 속성이 아니라 포함 요소의 height : 100 %였습니다 (내 사이트에는 반응 형 사이드 바가 포함되어 있기 때문에 .pusher div였습니다).

— zanther

0

다음은 Internet Explorer 11 및 Chrome에서도 작동하는 flex를 사용하는 예입니다.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

스 니펫 확장

— 배드 트리 루
소스

15

을 붙여 넣는 대신 추가 정보를 입력하십시오 Html.

— Peter

7

이 답변이 정확하고 유용 할 수 있지만 문제 해결에 도움이되는 방법을 설명하기 위해 몇 가지 설명을 함께 포함하는 것이 좋습니다. 이것은 작동을 멈추게하는 변경 (아마도 관련이 없음)이 있고 사용자가 한 번 작동 한 방식을 이해해야하는 경우에 특히 유용합니다.

— Erty Seidohl

0

때로는 스타일 앞에 '-ms-'를 추가하는 것처럼 간단합니다. -ms-flex-flow : row wrap; 또한 작동하도록합니다.

— 마르셀 그레이
소스

3

때때로, 그러나 대부분은 아닙니다;) 전 세계적으로 IE를 덤프합시다

— trainoasis