皆さんには大変お世話になっております。
早速ですが、以下の件、ご教示いただけないでしょうか?
《課題》
標題の件、画面デザインの際、tableをフレームとして使用することがあるのですが、flex要素を
セル内に使用すると、Chromeでは問題なく動作するのですが、IE11では上手く動作しない状況です。
具体的にはflex要素で「flex-wrap: wrap」プロパティを付与し子要素を折り返したいも、
IE11では折り返すことなく横一列に並んでしまいます
《再現用コード》
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>flex in table</title> 6 <link rel="stylesheet" type="text/css" href="flexstyle.css"> 7</head> 8<body> 9 <table border="1"> 10 <tr> 11 <td> 12 <!-- このセル内にFLEX要素を形成 --> 13 <div class="box1"> 14 <div class="gold">inbox1</div> 15 <div class="orange">inbox2</div> 16 <div class="gold">inbox3</div> 17 <div class="orange">inbox4</div> 18 <div class="gold">inbox5</div> 19 <div class="orange">inbox6</div> 20 <div class="gold">inbox7</div> 21 <div class="orange">inbox8</div> 22 <div class="gold">inbox9</div> 23 <div class="orange">inbox10</div> 24 <div class="gold">inbox11</div> 25 </div> 26 </td> 27 <td> 28 BOX2 29 </td> 30 </tr> 31 </table> 32</body> 33</html>
CSSはこちらです
CSS
1table{ 2 border-collapse: collapse; 3 width: 100%; 4 min-width: 400px; 5} 6td{text-align: center;} 7td:first-of-type{ 8 width: 400px; 9} 10td:nth-of-type(2){ 11 width: 200px; 12} 13.gold{background: gold;} 14.orange{background: orange;} 15 16.box1{ /* flexの設定(親要素)*/ 17 display: -webkit-flex; 18 display: -ms-flexbox; 19 display: flex; 20 flex-wrap: wrap;/*子要素を折り返す*/ 21 align-items: flex-start;/*垂直方向の配置を親要素の開始位置を起点*/ 22 align-content: flex-start;/*複数子要素の配置を親要素の開始位置に設定*/ 23 background: lightcyan; 24 width: auto;/*画面サイズに合わせて伸長*/ 25 height: 200px; 26 /* 子要素を折り返すとセルからはみ出すのでスクロールバーを付与*/ 27 overflow-y: scroll; 28 29} 30.box1>div{/*子要素の設定*/ 31 width: 100px; 32 height: 100px; 33 margin: 1px; 34 /*-----------------------------*/ 35 /* 子要素内の文字列を中央に配置する */ 36 /*-----------------------------*/ 37 display: flex; 38 align-items: center; 39 justify-content: center; 40}
《確認した点》
1.tableにせずDIVにするとIE11でも動作(当然ではありますが)
2.ul,li内にflexを同じように作成してみましたが問題なく動作
なにか、おまじないがたりなのでしょうか?
それとも単純にtable内でのflexの使用は禁止手なのでしょうか?
どなたかご教示いただけると幸いです。
回答2件
あなたの回答
tips
プレビュー