Question

我正在学习如何在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中没有。

Answer 1

这会更好。我稍微更新了flexbox规则。

Src：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>

Flex Box的控制高度

1 个答案: