display:box;

display:box;
-webkit-box-pack: center;
-webkit-box-align: center;

-webkit-box-pack: justify;做均匀分布布局。


配图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
    height: 40px;
    display: -webkit-box;
    -webkit-box-pack: justify;
}
.cell{
    width: 20px;
    height: 20px;
    background-color: red;
}
    </style>
</head>
<body>
    <div class="box">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>
</html>

CSS3盒模型display：box详解:http://www.warting.com/web/201402/68557.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,561评论 0赞 6
  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,678评论 0赞 26
  • H5移动端知识点总结
    阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,587评论 0赞 1
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,821评论 0赞 2
  • 今夜无眠
    北京时间凌晨2:48 听着响在耳旁的汽笛 看着货场明亮的灯火 感受列车驶过的震动 今夜注定无眠！
    Devil阿生阅读 238评论 0赞 0