Experience it yourself in Jiema, and the learning effect is better! If you don't have an account, click to get an account for free: http://dev.gemcoder.com/front/development/index.html#/login
This article will introduce five layout components, namely, fluid layout, flexible layout, fixed layout, multi-row multi-column layout, and Layout layout .
1. Flow layout
Flow layout is also called percentage layout, non-fixed pixel layout or adaptive layout. The characteristic of this layout is that as the screen changes, the layout of the page does not change significantly, and it can be adapted and adjusted, which just complements the responsive layout.
Knowledge Supplement:
responsive layout
Set the layout format for different screens. When the screen size changes, different layouts will appear to realize different display methods for browsing web pages on terminals with different screen resolutions. Responsive design can make the website have a better browsing and reading experience on mobile phones and tablets. Only the layout changes, the elements remain the same.
The common design templates for flow layout are as follows:
(1) Left fixed + right adaptive
(2) Left and right fixed width + middle adaptive
How to use it in shortcode?
Based on Layou layout components, the width and height of subcomponents are set as percentages.
2. Flexible layout
Elastic Layout is used to provide maximum flexibility for box models. Any container can be specified as a flex layout, which can be combined with a grid layout. The traditional solution of layout, based on the box model, relies on display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.
Knowledge Supplement:
The Box Model is a model used in CSS for layout and positioning of elements. It regards each HTML element as a rectangular box, which consists of four parts: the content area (content), the inner margin area (padding), the border area (border) and the outer margin area (margin).
How to use it in shortcode?
Based on the use of FlexContainer components, the usage scenarios are as follows:
(1) Arrangement direction
Determine the direction of the main axis, you can change the sub-element diplay (that is, the display mode) through this attribute.
Effect:
(2) Alignment
Arrangement (direction) of main axis elements. It may take 5 values. The specific alignment is related to the direction of the axis. The following assumes that the main axis is from left to right:
Effect:
The elements of the cross axis are arranged (perpendicular to the direction), and the specific alignment is related to the direction of the axis. The following assumes that the cross axis is from top to bottom:
Effect:
(3) Newline
By default, items are arranged along a line (aka "axis"). The flex-wrap attribute defines how to wrap if an axis line does not fit.
without line breaks:
Newline, first line above:
Newline, first line below:
3. Fixed layout
Generally used to float above the element, you can drag the position arbitrarily, break away from the document flow, and generate a fixed-positioned element, which is positioned relative to the browser window. The difference from absolute is that fixed will not follow the screen scrolling (common various sticking screens) advertise).
Knowledge Supplement:
Document flow (Document Flow) refers to the process of arranging elements in the order in which they appear in an HTML document. When a browser parses an HTML document, it will determine the position of the element on the page according to the label and attribute of the element, and determine the display mode of the element according to the display attribute of the element.
The elements in the document flow will be arranged from top to bottom according to the order in which they appear in the HTML document, and each element will occupy a certain space. The position of an element can be adjusted through layout properties in CSS (such as position, float, etc.), but its scope of influence is limited to the element itself and its subsequent elements, and will not affect the position of previous elements.
How to use it in shortcode?
Based on FixedContainer and FlexContainer components, it is suitable for the following scenarios:
(1) Default (static) positioning method
When you do not specify a positioning method for an element, the default is static, that is, according to the document flow (flow) positioning, the element is placed in a suitable place. Therefore, at different resolutions, using streaming positioning can be well self-adapted and achieve a relatively good layout effect.
(2) Relative positioning method
On the basis of static, if I want to make some adjustments (displacement) to an element in its original position, we can set the positioning of the element to a relative layout, and specify the relative displacement (using top, bottom, left, right). One thing to note is that a relatively positioned element is still in the document flow, and still occupies the space it used to occupy - even though it is no longer where it should be.
(3) Absolute positioning method
If you want to place an element at a specified position in a document, you can use absolute to position it, set the position of the element to absolute layout, and use top, bottom, left, right to position.
(4) Fixed (fixed) positioning method
We know that the reference for absolute positioning is "the last positioned parent element (static is not counted)", so if I want the reference for an element to be positioned always the entire document (viewport), use fixed positioning, fixed positioning reference object is always the current document. Using fixed positioning, we can easily fix the element at a certain position on the page, and the position will not change with the scroll bar.
Effect:
Four, multi-row multi-column layout
The essence of multi-row multi-column layout is to make elements float so as to break away from the document flow. Combined with the calculation properties of css, the page can be quickly divided into multiple layouts, static layout and adaptive layout can be realized, and arbitrary elements can be nested.
Knowledge Supplement:
1. Static layout
Static layout means that the outermost container of the webpage has a fixed size, and all content is based on this container, and the scroll bar (overflow:scroll) is used to realize scrolling for the part exceeding the width and height.
2. Adaptive layout
Adaptive layout refers to a design method in which a web page or application program can automatically adjust the layout and display effect according to the screen size and resolution of different devices. Its purpose is to enable users to obtain a better user experience on different devices. Whether browsing the page on a desktop computer, tablet or mobile phone, the content can be displayed in the most appropriate way.
Common design templates for adaptive layout are as follows:
(1) Fixed width and proportional layout
(2) Equal layout
(3) Percentage width and proportional layout
How to set up in shortcode?
Layout components based on multiple rows and multiple columns. You can set fixed pixels, percentages, and values, where the number represents the number of copies the column occupies in the remaining area to be divided. If the value of all items is 1, they will equally divide the remaining space (if any). If one item has a value of 2 and the others all have 1, the former will occupy twice as much remaining space as the others.
Five, Layout layout
Relevant information can be viewed in the article: Page Design - Layout layout_layout layout method_Jiama Xiaobian's Blog-CSDN Blog