フレックス - 3列、3列目が画面を超えます

Question

このコードを実行すると、右側の列が画面を超えて右に長くなります。

1. 私はサイドカラムが応答しやすいようにしたいが、中間のカラムは固定幅にしたい。

2. IE10で動作させるにはどうすればいいですか？

レイアウト：

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="middle"> 
     <div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet 
     </div> 
    </div> 
    <div class="right"></div> 
</div> 

CSS：あなたは正しくflex速記を使用していない

.wrapper { 
    height: 80px; 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 
.wrapper .left { 
    height: 100%; 
    flex: 0 0 100%; 
    background-color: yellow; 
} 
.wrapper .middle { 
    height: 100%; 
    flex: 0 0 800px; 
    background-color: orange; 
} 
.wrapper .right { 
    height: 100%; 
    flex: 0 0 100%; 
    background-color: red; 
} 

Answer 1

。 これは正しい形式です： flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

Iveは、IEを含むあなたの仕様で動作するようにあなたを変更しました。固定幅800oxのため、これをフルスクリーンで見る必要があります。

.wrapper { 
 
    height: 80px; 
 
    width: 100%; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 
.wrapper .left { 
 
    height: 100%; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0%; 
 
    flex: 1 1 0%; 
 
    background-color: yellow; 
 
} 
 
.wrapper .middle { 
 
    height: 100%; 
 
    width: 800px; 
 
    background-color: orange; 
 
} 
 
.wrapper .right { 
 
    height: 100%; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0%; 
 
    flex: 1 1 0%; 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="middle"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet 
 
    </div> 
 
    </div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

あなたはフレックス使用することができます：1。それはあなたの左右の列のために独自のものです。 flex-growプロパティに応じて適切に設定されるので、flex-shrink値とflex-basis値を指定する必要はありません。