CSS流动布局-页面自适应

简介: CSS流动布局-页面自适应

项目中经常会碰到页面自适应的问题,例如:商城的列表展示、分类列表展示等页面,如下:

该页面会随着页面的放大缩小而随之发生变化,这种自适应的页面布局在大屏幕、小屏幕、不同的浏览器设备上都应该呈现出与设计匹配的的页面效果,通过流动布局可以解决css页面适配问题,使页面在不同屏幕大小下都有良好的呈现。

解决方法:display: flex;配合子元素的动态宽度来实现,子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。

.box{
    border: 1px solid red;
    width: 80%;
    display: flex;
    direction: ltr; 
    flex-wrap: wrap;
    padding: 2px;
    .innerBox{
        width: calc((100% - 12px) / 3);  /* 宽度 = (总宽 - 自身的margin) / 每行3个 */
        height: 50px;
        border-radius: 10px;
        margin: 2px;
        background: #ccc;
    }
}

css中有一个“流”的概念,这种布局自然自动,像水流一样。正常情况下,html的元素布局是从左往右依次排列,块级元素从上往下排列,我们所说的脱离文档流也就是该元素从流中漂浮起来,与之前的元素不在同一个层级而形成的不占位效果。

有了流这个概念后,我们可以通过更改流的水平流向来更改元素的排列方向。

direction属性用来设置文本、表列水平溢出的方向。 rtl 表示从右到左, ltr 表示从左到右。

direction属性介绍:https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction

对应上面的flex布局,通过设置文档的水平流向来更改文档的起始位置:

direction: rtl; 


如果是行内元素,只需要更改水平流向即可实现元素的左右对齐。

.container{
    width: 348px;
    border: 1px solid red;
    direction: rtl;  /*文档水平流向 从右流向:rtl 从左流向:ltr*/
    padding: 10px 10px 0px 0px;
    >button{
        margin-inline-end: 10px;
        margin-block-end : 10px;
    }
}

margin-inline-end用于定义元素的逻辑内联结束边距。

这里需要注意,margin-inline-end是受direction属性影响的,如果文档的水平流向为右向左,那么

margin-inline-end相当于margin-right

margin-inline-start相当于margin-left

如果文档的水平流向为左向右,那么

margin-inline-end相当于margin-left

margin-inline-start相当于margin-right

direction: ltr;  /*文档水平流向 从右流向:rtl 从左流向:ltr*/
/*....*/
    >button{
       margin-inline-start: 10px;
       margin-block-end : 10px;
    }

margin的逻辑属性是围绕inline、block、start、end展开的

inline、block表示方向,inline表示水平(左右),block表示垂直(上下)

start、end表示起止方位,start表示开始位置(左),end表示结束位置(右)

上面的几种逻辑属性都会受到direction属性影响,使用时需要注意。

margin、padding都可以通过inline、block、start、end组合变为css逻辑属性。

padding-inline-start: 20px;margin-inline-start: 20px; …


流的应用除了更改文档的水平流以外,还可以用来做对称布局,例如微信聊天页,更改direction的水平流向,即可实现微信的自身和对方的聊天气泡定位。

<!-- 微信聊天页 -->
<div class="wx_chat">
     <div class="wx_chunk" v-for="(item,index) in 3">
         <div class="wx_image">头像</div><span>用户昵称</span>
     </div>
     <div class="my_wx_chunk">
         <div class="wx_image">我的头像</div><span>用户昵称</span>
     </div>
</div>
<!-- 微信聊天页end -->
.wx_chat{
    width: 300px;
    border: 1px solid cyan;
    margin: 20px;
    .wx_chunk{
        display: flex;
        .wx_image{
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid red;
        }
    }
    .my_wx_chunk{
        direction: rtl;  /* 更改水平流向为向右 */
        display: flex;
        .wx_image{
        width: 50px;
        height: 50px;
        font-size: 12px;
        text-align: center;
        line-height: 50px;
        border: 1px solid red;
        }
    }
}

效果如下:


案例源码:https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~

目录
相关文章
|
5天前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
29 20
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
120 7
|
3月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
33 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
前端开发
页面打印 css
CSS打印分页 page-break-before : auto | always | avoid | left | right | null   参数:  auto :  假如需要在对象之前插入页分割符always :  始终在对象之前插入页分割符avoid :  避免在对象前面插入页分割符left :  在对象前面插入页分割符直到它到达一个空白的左页边right :  在对象前面插入页分割符直到它到达一个空白的右页边null :  空值。
661 0

热门文章

最新文章