flex弹性盒子布局

让我们直接进入主题,设置弹性盒子布局的方式:

.container {
    
    display: flex; 
} 

<div class="container"></div>

现在已经获得了一个flex容器, 在容器中加入一些flex项,修改一下样式，让它们更加醒目:

.container { 
    display: flex; 
    background: green; 
} 
.container div { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    background: gold; 
} 
<div class="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <di