Html 提供意外输出的CSS flexbox_Html_Css_Flexbox

Html 提供意外输出的CSS flexbox

html css

Html 提供意外输出的CSS flexbox,html,css,flexbox,Html,Css,Flexbox,我有以下用于测试flexbox的标记： <html> <head> <style> .parent{ display: flex; flex-direction: column; } .parent>div>button{ display: flex;

我有以下用于测试flexbox的标记：

<html>
    <head>
        <style>
            .parent{
                display: flex;
                flex-direction: column;
            }
           .parent>div>button{
               display: flex;
           }
           .parent>div:nth-child(2){
               display: flex;
           }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="div1"><button>butt1</button><button>butt7</button></div>
            <div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
                <button>butt5</button><button>butt6</button></div>
        </div>
    </body>
</html>

即使如此，

butt1

和

butt7

也在列中对齐。为什么它们在行中没有对齐？？子

div

是否继承父级

flex direction

的值？我已经读到

弹性方向的默认值是行
。因此，使用这种逻辑，它们应该按行对齐，而不是按列对齐
请帮我找出上述行为的原因
谢谢。
如果要对div1
应用flex，请执行以下操作：
.parent>.div1{
    display: flex;
}

看这里，我为你添加了背景色，让你看看发生了什么：

.parent{
背景：红色；
显示器：flex；
弯曲方向：立柱；
}
.parent>.div1{
背景：蓝色；
利润率：10px；
显示器：flex；
}
.parent>div:n个子项（2）{
背景：绿色；
利润率：10px；
显示器：flex；
}

butt1butt7
butt2butt3butt4
butt5butt6
这一行CSS就是问题所在：

.parent>div>按钮{
显示器：flex；
}

您正在使用>告诉css规则将应用于作为.parent->div->button元素的直接子元素的元素

.parent{
显示器：flex；
弯曲方向：立柱；
}
.parent>div:n个子项（2）{
显示器：flex；
}

butt1butt7
butt2butt3butt4
butt5butt6
问题在于：
.parent>div>按钮{
显示器：flex；
}

您覆盖了按钮的默认样式，即display:inline block
<代码>显示：flex适用于子元素而不是元素本身，因此您的按钮的行为类似于普通div（display:block
）。如果您想以自己的方式使用flex，即使它不合适，也可以将其更改为display:inline flex

更精确的信息直接来自规范：
flex-
该值使元素在放置到flow layout中时生成块级别的flex容器框
内联flex-此值会导致元素生成一个内联级别的flex容器框，当放置在flow layout中时
@改进
你有很多不需要的代码
您可以通过以下方式获得相同的结果：

.parent>div{
显示器：flex；
}

巴特1
巴特7
butt2
巴特3
巴特4
巴特5
巴特6
这是因为您在该divdisplay:flex中指定了按钮。去掉它，这就不是问题了。这似乎将一个有效但不是100%渲染的button@Paulie_D谢谢你的回复。我没有在按钮上使用flex-direction:column
，即使它们是按列对齐的。这才是真正让我困惑的地方。你不必将列应用到按钮上，只需从按钮上移除flex。谢谢你的回答。但我真的很困惑为什么（.parent>div>按钮
）会在列中对齐butt1和butt7，而我甚至没有为它提供flex direction:column
属性。@GratisDevs您覆盖了按钮
的默认样式，即显示：内联块
，因此，您的按钮的行为类似于普通的div。我已经更新了答案。我想这就是我一直在寻找的答案。非常感谢。
.parent>.div1{
    display: flex;
}