flex弹性布局1

<div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div>
上面的是一个基本代码段。
.container { border: 1px solid; width: 30rem; /* 先把最大的块元素转为flex容器，这样就可以flex特征进行布局 */ display: flex;
/* flex项目必须是flex容器的子元素 */ .container > .item { padding: 1rem; background-color: beige; border: 1px solid; }
1.任何一个可视元素添加display：flex都可以转为flex容器
2.flex弹性容器内的直接子元素称之为flex项目，它是真正的布局目标对象 。

效果图