logo标签列表

当flex方向为列时，一个类的flex属性不起作用。

htmlcssflexbox
3
例如，当flex-direction是row时，.item-2的属性生效，但当flex-direction是column时不是。对于相同情况，我需要做哪些更改？谢谢。 这是为了理解flexbox在CSS中的工作原理而进行的尝试，与浮动相比。再次感谢。
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flex Basics</title>
        <style>
            * {
                box-sizing: border-box;
            }
    
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
    
            .flex-container {
                background-color: #f4f4f4;
                display: flex;
                flex-direction: column;
                /* Cross axis align */
                align-items: stretch;
               
                /* Main axis align */
                height: 50vh;
            }
    
            .item {
                background: #f4f4f4;
                border: #ccc solid 2px;
                margin: 10px;
                padding: 10px;
                text-align: center;
                border-radius: 10px;
                flex: 1;
            }
    
            .item-2 {flex: 2}
    
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="item item-1">
                <h3>Item 1</h3>
            </div>
            <div class="item item-2">
                <h3>Item 2</h3>
            </div>
            <div class="item item-3">
                <h3>Item 3</h3>
            </div>
        </div>
    </body>
    </html>
1个回答
0

一切正常。

flex: 2 是三个属性的简写之一。其中一个是 flex-grow。在 flex-direction: row 的情况下，您的项目正在增长，因为有空间可以增长。

但是当您执行 flex-direction: column 时，容器的高度不足以使第二个子元素增长。在这里，我稍微增加了高度：

* {
                box-sizing: border-box;
            }
    
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
    
            .flex-container {
                background-color: #f4f4f4;
                display: flex;
                flex-direction: column;
                /* Cross axis align */
                align-items: stretch;
               
                /* Main axis align */
                height: 150vh;
            }
    
            .item {
                background: #f4f4f4;
                border: #ccc solid 2px;
                margin: 10px;
                padding: 10px;
                text-align: center;
                border-radius: 10px;
                flex: 1;
            }
    
            .item-2 {flex: 2}
<div class="flex-container">
            <div class="item item-1">
                <h3>Item 1</h3>
            </div>
            <div class="item item-2">
                <h3>Item 2</h3>
            </div>
            <div class="item item-3">
                <h3>Item 3</h3>
            </div>
        </div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接