css布局入门级实战之九宫格网格布局

前言

刚开始做前端的同学,样式是需要跨过去的第一道坎,而样式中的布局设计更是最常见的需求之一,比如说常见的九宫格或是六宫格,这篇文件就以一个实战案例讲述关于样式布局的相关内容.本文为uniapp项目,不同前端项目的css样式风部分会有差异,大部分都是一致的,重点理解体会布局实现方式以及注意问题.
先看下需要实现的页面:

这是一个六宫格图片布局,其中第一个图是大图,其余均是小图,大小一致,第一行的小图需要上下排列,第二行的小图水平放置.

实现过程

uniapp中基本的视图容器为view,相当于之前接触的div都是块标签.
可以按照图片放置位置划分几个view,整体分为两个大的view.第一个为上面三个,第二个为下面三个.

对应样式如下:

第一行三个又可以分为两部分,左边大的和右边两个小的组成的一部分.

对应样式如下:

最下面一行就是三个图水平放置.

对应样式如下:

页面源码如下:

<template><view><view class="dynaimic_class"><view class="dynaimic_item_comnbine_class"><view class="dynaimic_item_big_class"><image src="../../static/dynamic/dynamic_1.png"></image></view><view class="dynaimic_item_big_small_combine_class"><view class="dynaimic_item_small_class"><image src="../../static/dynamic/dynamic_2.png"></image></view><view class="dynaimic_item_small_class"><image src="../../static/dynamic/dynamic_3.png"></image></view></view></view><view class="dynaimic_item_small_combine_class"><view class="dynaimic_item_small_class"><image src="../../static/dynamic/dynamic_4.png"></image></view><view class="dynaimic_item_small_class"><image src="../../static/dynamic/dynamic_5.png"></image></view><view class="dynaimic_item_small_class"><image src="../../static/dynamic/dynamic_6.png"></image></view></view></view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">.dynaimic_class{   // 父容器height: 600rpx;width: 100%;display: flex;  // flex布局并实现换行flex-wrap: wrap;box-sizing: border-box;  // 设置盒模型以及左右边距10rpx,处理padding-right不生效问题padding: 10rpx;.dynaimic_item_comnbine_class{ // 第一行大的view样式height: calc(100%/3*2);width: 100%;display: flex;    // flex布局实现水平排列flex-direction: row;// margin: 10rpx;.dynaimic_item_big_class{  // 第一行左侧大图样式height: 100%;width: calc(100%/3*2);image{height: 100%;width: 100%;}}.dynaimic_item_big_small_combine_class{  // 第一行右侧两个竖直摆放的小图height: 100%;width: calc(100%/3);display: flex;   // flex布局实现数值排列flex-direction: column;// margin: 10rpx;.dynaimic_item_small_class{  // 小图样式height: 50%;width: 100%;image{height: 100%;width: 100%;}}}}.dynaimic_item_small_combine_class{  //第二行三个小图view样式height: calc(100%/3);width: 100%;display: flex;justify-content: space-around;.dynaimic_item_small_class{  // 每个小图样式height: 100%;width: calc(100%/3); // 计算每个view大小image{height: 100%;width: 100%;}}}}
</style>

总结与注意事项

1.容器中实现flex布局并换行使用flex-wrap: wrap;
    2.flex布局指定水平或是垂直布局可以使用flex-direction: row;
    3.实际实现过程中存在padding-right不生效问题可以使用box-sizing: border-box;进行处理.
    4.设置每个view宽度和高度时都是使用百分比,这里指占用父容器的百分数,另外对于百分数存在除不尽的情况进行四舍五入可能会带来显示宽度不一致问题可以使用calc函数进行相关运算.
    5.image图片完全在view中显示的处理方式是设置image的宽高占用view的100%,uniapp中image中默认为320px*240px.不指定会出现image超过view布局的情形.
    以上是实现宫格样式布局处理的全过程,如果感觉有所帮助或是有其他好的实现方式欢迎点赞或是评论区留言!

css布局入门级实战之九宫格网格布局相关推荐

css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
grid布局浏览器兼容_CSS Grid 网格布局教程
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
java 网格布局管理器,Java图形化界面设计——布局管理器之GridLayout（网格布局）...
网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布. l 网格每列宽度相同,等于容器的宽度除以网格的列数. l 网格每行高度相同,等于容器的高度除以网格的行数. l 各组件的排列方式 ...
java计算器布局设计_Java图形化界面设计——布局管理器之GridLayout（网格布局）之计算器...
代码如下: import java.awt.*; import javax.swing.*; public class GridFrame extends JFrame { // 定义字符串数组,为按 ...
计算器界面网格布局java,安卓案例：网格布局实现计算器界面
安卓案例:网格布局实现计算器界面一.网格布局(GridLayout) GridLayout布局使用虚细线将布局划分为行.列和单元格,也支持一个控件在行.列上都有交错排列. (一)继承关系图 (二)常 ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
css布局图片大小,CSS3 使用网格布局实现的不同尺寸照片墙
CSS 语言: CSSSCSS 确定 body { background-color: #efefef; } h3 { margin: 0; } h3+p { margin-top: 0; } .wr ...
css【详解】grid布局—— 网格布局（栅格布局）
网格布局(Grid)是最强大的 CSS 布局方案 grid布局和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...

css布局入门级实战之九宫格网格布局

前言

实现过程

css布局入门级实战之九宫格网格布局相关推荐

最新文章

热门文章