等比例等间距布局实例

Vicky 发布于2019-08-29 12:27 / 1871人阅读

摘要：这是一个很常用的布局，这里给出一种实现方案代码实现效果解析子元素等分排满屏幕宽度，父元素设置子元素设置，意思是宽度自动填满剩余空间，如果有多个并列子元素，会按照数值等比分配空间子元素间隔相等，所有子元素设置，第一个子元素使用伪类设

这是一个很常用的布局，这里给出一种实现方案

代码 html


    Hello
    W3School
    W3School

css

div {
    display:flex;
    width:100%;
    border:1px solid black;
}

p {
    flex:1;
    margin-right:15px;
    border:1px solid red;
}

p:first-child {
    margin-left:15px;
}

实现效果

解析

子元素等分排满屏幕宽度，父元素设置display:flex;

子元素设置flex:1，意思是宽度自动填满剩余空间，如果有多个并列子元素，会按照数值等比分配空间；

子元素间隔相等，所有子元素设置margin-right:15px，第一个子元素使用伪类(first-child)设置margin-left:15px;

这样子就可以实现等宽等间距布局，如果不想等宽，可以设置不同的flex实现按比例分配；

兼容问题

flex存在很多兼容性问题，还需要设置以下属性，可以兼容Android4.0+、iOS7.0+

div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

更多flex兼容性问题，参考腾讯ISUX文章《移动端全兼容的flexbox速成班》

云服务器 GPU云服务器等比例等比缩略图 PHP等比缩放 GIF等比缩放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111903.html

avalon js实现仿google plus图片多张拖动排序

摘要：支持多张图片拖动排序。解决方法是设置变量表示单元格在方向的在添加偏移的时候，增加判定条件。根源出现这个问题的原因在于依次移动目标图片到目标位置，对多张目标图片，会有一个移动先后的考量。效果 showImg(https://segmentfault.com/img/bVp0ye);showImg(https://segmentfault.com/img/bVp0GA);拖动+响应式效果...

pekonchan 2019-08-28 18:18 评论0 收藏0
avalon js实现仿google plus图片多张拖动排序

摘要：支持多张图片拖动排序。解决方法是设置变量表示单元格在方向的在添加偏移的时候，增加判定条件。根源出现这个问题的原因在于依次移动目标图片到目标位置，对多张目标图片，会有一个移动先后的考量。效果 showImg(https://segmentfault.com/img/bVp0ye);showImg(https://segmentfault.com/img/bVp0GA);拖动+响应式效果...

马龙驹 2019-08-21 10:41 评论0 收藏0