通过Flexbox可以快速实现双列布局,主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间,并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。 现在给类名为"container"的父盒子添加"display: flex"属性,使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度,所以两个弹性项盒子的高度也是自适应。右边的内容区宽度会占满弹性容器盒子的剩余空间,所以宽度也是自适应的。 完成以上所讲的步骤即可通过测试,进入下一节的学习吧。
加载中...