html flex 浮动失效,flex布局和float布局混合使用导致的css失效问题 （上）

需求：两端对齐

这个需求应该是比较容易的，使用flex布局就可以轻松完成。但是我贱啊，没办法。

flex布局和float布局混用导致的布局混乱的原因

#root {

width: 800px;

height: 800px;

position: relative;

margin: auto;

}

.container {

width: 100%;

height: auto;

border: 1px solid #ccc;

/*水平布局*/

display: flex;

flex-direction: row;

align-items: center;

}

.container > div {

display: flex;

flex-direction: row;

}

/*左按钮组左浮动，右按钮组右浮动*/

.container > div:nth-child(1) {

float: left;

}

.container > div:nth-child(2) {

float: right;

}

.container > div > button {

width: 80px;

height: 40px;

cursor: pointer;

}

search

update

cancel

create

没有采用 justify-content: space-between; 后果是预期中的左按钮组没有左浮动，右按钮组也没有右浮动。

为什么会失效呢？这需要深入理解flex布局。这是我下一篇需要着重解决的问题。