Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to achieve view view container in Mini Program". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought slowly and deeply, and study and learn "how to achieve view view container in Mini Program".

View container

/ / wxml flex-direction: row 1 23 / / wxss.flex-wrp_one {display: flex; flex-direction: row;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

Picture

/ / wxml flex-direction: column 1 23 / / wxss.flex-wrp_two {display: flex; flex-direction: column;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

Picture

/ / wxml justify-content: flex-start 1 23 / / wxss. Flex-wrp_three {display: flex; justify-content: flex-start;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

/ / wxml justify-content: flex-end 1 23 / / wxss.flex-wrp_four {display: flex; justify-content: flex-end;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

/ / wxml justify-content: center 1 23 / / wxss.flex-wrp_five {display: flex; justify-content: center;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

/ / wxml justify-content: space-between 1 23 / / wxss.flex-wrp_six {display: flex; justify-content: space-between;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

/ / wxml justify-content: space-around 1 23 / / wxss.flex-wrp_seven {display: flex; justify-content: space-around;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

/ / wxml justify-content: space-evenly 1 23 / / wxss.flex-wrp_eight {display: flex; justify-content: space-evenly;}. Flex-item {width: 100px; height: 100px;}. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;}

View

Attribute

Flex-direction description row horizontal arrangement column vertical arrangement item content alignment (justify-content) description flex-start to the front of the line next to the flex-end to the end of the line next to the center of the center average distribution space-around average distribution, leaving half of the interval on both sides of the space-evenly is the same as in the middle.

Source code

/ / wxml flex-direction: row 1 2 3 flex-direction: column 1 2 3 justify-content: flex-start 1 2 3 justify-content: flex-end 1 2 3 justify-content: center 1 2 3 justify-content: space-between 1 2 3 justify-content: space-around 1 2 3 justify-content: space-evenly 1 2 3 / / wxss.flex-wrp_one {display: flex; flex-direction: row;}. Flex-wrp_two {display: flex; flex-direction: column Flex-wrp_three {display: flex; justify-content: flex-start;}. Flex-wrp_four {display: flex; justify-content: flex-end;}. Flex-wrp_five {display: flex; justify-content: center;}. Flex-wrp_six {display: flex; justify-content: space-between;}. Flex-wrp_seven {display: flex; justify-content: space-around;}. Flex-wrp_eight {display: flex; justify-content: space-evenly;}. Flex-item {width: 100px; height: 100px }. Bc_green {background: green;}. Bc_red {background: red;}. Bc_blue {background: blue;} Thank you for reading. The above is the content of "how to implement the view view container in Mini Program". After the study of this article, I believe you have a deeper understanding of how to implement the view view container in Mini Program, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.