background knowledge:
1. Layout components:
A layout component is a component used to arrange and organize other components in a user interface. They provide an easy way to control and manage the position, size, and hierarchy of components on a page. Layout components can be containers that can contain other components and determine how they are displayed on the interface. Common layout components include container layout components, grid layout components, box layout components, border layout components, flow layout components, etc.
2. Container:
The container is the parent element designated as a flex layout, which is defined using the display: flex or display: inline-flex attribute. Child elements in a container are laid out according to the rules of the container.
The FreeContainer component is a comprehensive layout component, which can be used to perform vertical and horizontal layout operations, and provides vertical and horizontal dynamic increase layouts to complete modules with consistent layouts in a more efficient way.
1. How to use
1. Log in to Shortcode
If you don't have an account, click to get a free account: http://dev.gemcoder.com/front/development/index.html#/officialLogin?jm=cmVnaXN0ZXI9dHJ1ZQ%3D%3D
2. Create applications and pages
3. Find the FreeContainer component, drag and drop it to the page position
4. Select the layout method (the default is elastic layout), and drag in other components
2. Component properties
The properties of the FreeContainer component are:
3. Application scenarios - free layout of components
1. Lay out the components in the container vertically or horizontally
Effect:
Configuration:
2. Set the line break of the text component in the container
Effect:
Configuration:
3. Set the row and column spacing inside the container
Effect:
Configuration:
4. There are 5 arrangements in the row direction to control the horizontal position of the container content/control the alignment of the columns
Effect: OK
effect: column
Configuration:
5. Change the style background
Effect:
set up:
6. Collaborative use with other components
Used to add a FreeContainer component with consistent column layout at the same level
Effect:
