目录
弹性布局学习-介绍(一)
弹性布局学习-详解 flex-direction【决定主轴的方向】(二)
弹性布局学习-详解 justify-content(三)
弹性布局学习-详解 align-items(四)
弹性布局学习-详解flex-wrap(五)
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
弹性布局也叫伸缩盒布局,在使用过程中,十分的方便,避免了使用float的烦恼,此元素兼容性测试如下:
新概念
两端对齐布局(传统)
section ul {
} section li { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; float: left; background-color: pink; margin-right: 192px; list-style: none; }
两端对齐布局(伸缩布局)
section ul { display: flex; justify-content: space-between; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; background-color: pink; list-style:none; }
注: 在flex布局的时候,需要注意行内元素(a, input, textarea, span, i等),需要根据情况设置成display: block;