傻瓜式flex布局实现盒子二、四、N等分教学

二等分盒子部分代码

//用div一样   

css部分代码

  .contentUl {background-color: red;display: flex;margin: 0;padding: 10px;width: 100%;height: 100%;/* flex布局 */display: flex;// 开启换行flex-wrap: wrap;// 主轴上两端对齐justify-content: space-between;// 副轴上两端对齐align-content: space-between;//li盒子大小设置li {width: 49.5%;height: 100%;list-style: none;background-color: skyblue;}}

实现效果

 四等分盒子部分代码

css部分代码

  .contentUl {background-color: red;display: flex;margin: 0;padding: 10px;width: 100%;height: 100%;/* flex布局 */display: flex;// 开启换行flex-wrap: wrap;// 主轴上两端对齐justify-content: space-between;// 副轴上两端对齐align-content: space-between;//li盒子大小设置li {width: 49.5%;
//高度调整height: 49%;list-style: none;background-color: skyblue;}}

实现效果

 实现N等分只需要增加盒子数量并按需求减少width或者height即可

8等分

    

//css部分.contentUl {background-color: red;display: flex;margin: 0;padding: 10px;width: 100%;height: 100%;/* flex布局 */display: flex;// 开启换行flex-wrap: wrap;// 主轴上两端对齐justify-content: space-between;// 副轴上两端对齐align-content: space-between;//li盒子大小设置li {width: 24.5%;height: 49%;list-style: none;background-color: skyblue;}}

效果图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！