search
HomeWeChat AppletMini Program DevelopmentThe small program Ruhe uses the internal components of view to perform page layout function.

This article mainly introduces how to use small programs and the use of view internal components to perform page layout functions. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it

Knowledge points involved:

#1. Vertical arrangement, horizontal arrangement

2. Centered alignment

Example:

1. Default layout, two children in one parent component view

##    

   Display effect:

   

2. Give it first The parent view sets a height and color value to see the effect

  

  

  

3. Styles to achieve horizontal and vertical arrangement  

Horizontal arrangement:

  

------->

 Vertical arrangement (no setting, default vertical arrangement):

 

------>

4. Achieve the centering effect

The centering effect is divided into two situations, depending on the horizontal arrangement or vertical arrangement in 3.

①. When

arranges horizontally, justify-content:center ; determines to center horizontally

  

-------------------------->

②. When

is arranged horizontally, align-items:center; DetermineVertical centering   

--------------------- --->

③. When

is arranged vertically

, justify-content:center; determines vertical centering   

------------------------>

④、When

is vertical When arranging

, align-items:center; determines to be horizontally centered     

------------------- ----->

⑤. When

align-items:center; and justify-content:center; both exist

, regardless How to set the arrangement direction of the parent view, so that its child views are centered both horizontally and vertically   

----------- ------------->

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

related suggestion:

How to use the swiper component in the mini program to realize the function of the carousel chart

The display and hiding of the dynamic control component in the mini program

Implementation of small program using for loop to bind click event of item

The above is the detailed content of The small program Ruhe uses the internal components of view to perform page layout function.. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools