珠海门户网站建设,山东莱芜金点子信息港,h5在线制作免费版,wordpress能生成静态文件下载想必大家在开发中经常会用到flex布局。而且还会经常用到 justify-content 属性实现分栏等等
接下来给大家分别讲一下 justify-content 的属性值。
以下是我敲的效果图大家可以清晰看出区别
space-between 属性值可以就是说两端对齐
space-evenly 属性值是每个盒子之间的…想必大家在开发中经常会用到flex布局。而且还会经常用到 justify-content 属性实现分栏等等
接下来给大家分别讲一下 justify-content 的属性值。
以下是我敲的效果图大家可以清晰看出区别
space-between 属性值可以就是说两端对齐
space-evenly 属性值是每个盒子之间的间距相同
space-around 属性值是第一个盒子和最后一个盒子他们是相邻元素之间距离的一半。
如果大家还是不清楚可以建个html 把我的代码粘进去看看效果。
源码如下
!DOCTYPE html
html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title
/head
style .boxs1 { display: flex; justify-content: space-between; margin-top: 20px; } .boxs2 { display: flex; justify-content: space-evenly; margin-top: 20px; } .boxs3 { display: flex; justify-content: space-around; margin-top: 20px; } .box { width: 200px; height: 200px; background-color: pink; margin-left: 20px; } .box1 { width: 200px; height: 200px; background-color: royalblue; margin-left: 20px; } .box2 { width: 200px; height: 200px; background-color: red; margin-left: 20px; } .box3 { width: 200px; height: 200px; background-color: blanchedalmond; margin-left: 20px; } .box4 { width: 200px; height: 200px; background-color: blue; margin-left: 20px; }
/style body div classboxs1 div classbox/div div classbox1/div div classbox2/div div classbox3/div div classbox4/div /div div classboxs2 div classbox/div div classbox1/div div classbox2/div div classbox3/div div classbox4/div /div div classboxs3 div classbox/div div classbox1/div div classbox2/div div classbox3/div div classbox4/div /div
/body
/html
