フレックスボックスのコントロールの高さ

フレックスボックスモデルをHTML5で使用する方法を学び、このコードでボックスの高さをコントロールできないという問題を解決しました。できるだけ短くしました。フレックスボックスのコントロールの高さ

<html lang="en"> 
<head> 
    <title>Welcome to my site</title> 
    <meta charset="utf-8"/> 
    <style type="text/css"> 
     #mommy { 
      border: 2px solid blue; 
      display: -moz-box; 
      -moz-box-orient: horizontal; 
      width: 700px; 
      height: 300px; 
      -moz-box-pack: center; 
     } 

     #mommy div { 
      padding: 20px; 
      margin: 10px; 
      border-radius: 20px; 
      -moz-box-flex: 1; 
      height: 100px; 
     } 

     #kid1 { 
      border: 2px solid red; 
      background: green; 
     } 

     #kid2 { 
      border: 2px solid red; 
      background: yellow; 
     } 

     #kid3 { 
      border: 2px solid red; 
      background: red; 
     } 

     #kid4 { 
      border: 2px solid red; 
      background: orange; 
     } 

    </style> 
</head> 

<body> 
<section id="mommy"> 
    <div id="kid1">Child 1</div> 
    <div id="kid2">Child 2</div> 
    <div id="kid3">Child 3</div> 
    <div id="kid4">Child 4</div> 
</section> 
</body> 
</html>

-webkit拡張機能を追加しましたが、Chromeではうまく動作しますが、Firefoxでは使用できません。

出典

2016-07-19 MANA624

あなたはフレキシボックスでプレイするより多くの '-moz-'プレフィックスを必要としません。親に 'display：flex'を設定する必要があります（この場合は'＃mommy'） –

これはうまくいくでしょう。私はflexboxのルールを少し更新しました。

のSrc：Firefoxでhttps://css-tricks.com/using-flexbox/

<html lang="en"> 
 
<head> 
 
    <title>Welcome to my site</title> 
 
    <meta charset="utf-8"/> 
 
    <style type="text/css"> 
 
     #mommy { 
 
      display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ 
 
      display: -ms-flexbox; /* IE 10 */ 
 
      display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */ 
 
      display: flex;   /* Modern browsers */ 
 
      border: 2px solid blue;   
 
      width: 700px; 
 
      height: 300px; 
 
     } 
 

 
     #mommy div { 
 
      -webkit-box-flex: 1; /* iOS 6-, Safari 3.1-6 */ 
 
      width: 20%;   /* For old syntax, otherwise collapses. */ 
 
      -ms-flex: 1;   /* IE 10 */ 
 
      -webkit-flex: 1;  /* Safari 6.1+. iOS 7.1+ */ 
 
      flex: 1;    /* Modern browsers */ 
 
      padding: 20px; 
 
      margin: 10px; 
 
      border-radius: 20px; 
 
      height: 100px; 
 
     } 
 

 
     #kid1 { 
 
      border: 2px solid red; 
 
      background: green; 
 
     } 
 

 
     #kid2 { 
 
      border: 2px solid red; 
 
      background: yellow; 
 
     } 
 

 
     #kid3 { 
 
      border: 2px solid red; 
 
      background: red; 
 
     } 
 

 
     #kid4 { 
 
      border: 2px solid red; 
 
      background: orange; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
<section id="mommy"> 
 
    <div id="kid1">Child 1</div> 
 
    <div id="kid2">Child 2</div> 
 
    <div id="kid3">Child 3</div> 
 
    <div id="kid4">Child 4</div> 
 
</section> 
 
</body> 
 
</html>

出典

2016-07-19 07:02:06 LGSon

フレックスボックスのコントロールの高さ

答えて

関連する問題