foreword
Students who just started working on the front end, the style is the first hurdle that needs to be crossed, and the layout design in the style is one of the most common requirements, such as the common nine-square grid or six-square grid, this document uses a The practical case tells about the relevant content of the style layout. This article is a uniapp project. The css style style of different front-end projects will be different, and most of them are consistent. The key is to understand the layout implementation method and pay attention to the problems. First, let’s look at what needs to be implemented
. page:
This is a six-square grid picture layout, in which the first picture is a large picture, and the rest are small pictures with the same size. The small pictures in the first row need to be arranged up and down, and the small pictures in the second row are placed horizontally.
Implementation process
The basic view container in uniapp is view, which is equivalent to the divs you have touched before are all block tags.
You can divide several views according to the position of the picture, and the whole is divided into two large views. The first is the above three, and the second is For the following three.
The corresponding styles are as follows:
The three in the first line can be divided into two parts, the large one on the left and the two small ones on the right. The
corresponding style is as follows:
the bottom line is the horizontal placement of three pictures.
The corresponding style is as follows:
the source code of the page is as follows:
<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>
Summary and Notes
1. Implement flex layout in the container and use it for new lines. flex-wrap: wrap;
2. Flex layout can specify horizontal or vertical layout. You can use f. 3. There are problems that do not take effect lex-direction: row;
during the actual implementation process. You can use it to deal with it. 4. When setting the width and height of each view, it is Use a percentage, here refers to the percentage of the parent container occupied, and rounding up the indivisible situation of the percentage may cause the problem of inconsistent display width. You can use the function to perform related operations . Set the width and height of the image to occupy 100% of the view, and the image in uniapp defaults to 320px*240px. If you don’t specify it, the image will exceed the view layout. The above is the whole process of realizing the grid style layout processing. If you feel helpful or If there are other good implementation methods, welcome to like or leave a message in the comment area!padding-rightbox-sizing: border-box;calc