web前端设置两端对齐_前端两端对齐

设置两端对齐的代码为：

display: flex;
justify-content: space-between;

没有设置两端对齐生成的三个button的效果为：

代码为：

 <style>
      
        div button {
            background-color: antiquewhite;
            border-radius: 5px;
        }
        
        button:hover {
            background-color: aquamarine;
        }
    </style>

 <div>
        <button>button1</button>
        <button>button2</button>
        <button>button3</button>
    </div>

设置两端对齐后，生成的button布局效果为：

 代码为：

 <style>
        div {
            display: flex;
            justify-content: space-between;
            background-color: aquamarine;
        }
        
        div button {
            background-color: antiquewhite;
            border-radius: 5px;
        }
        
        button:hover {
            background-color: aquamarine;
        }
    </style>