Flex layout
Design Concept:
Flex layout is the axis elastic layout (one-dimensional layout), the main two large Flex boxes (containers) and Flex items, and flex items according to the external container to determine the internal size of the idea;
Implementation principle:
Flex layout three steps: branch, compute spindle, compute cross axis.
Basic Introduction:
Layout:
display: flex; Objects are presented as elastic flex boxes for block-level elements;
display: inline-flex; Objects are presented as elastic flex boxes for inline elements.
Properties:
Container properties on box:
Flex-direction: indicates the flex spindle direction
row | row-reverse | column | column-reverse
Flex-wrap: Whether the Flex child is wrapped
nowrap | wrap | wrap-reverse
Flex-flow: compound attribute (flex-direction flex-wrap);
flex-flow: row-reverse wrap;
Copy the codeIllustration-content: Specifies the alignment of Flex children on the main axis (horizontal)
flex-start | flex-end | center | space-between | space-around
Align-items: Specifies the alignment of Flex children on the side axis (vertical)
stretch | flex-start | flex-end | center | baseline
“Stretch” : default value. When the Flex subitem height is not set or the height is set to auto, “stretch” takes effect and sets the Flex subitem height to row height. Note that in the case of only one row, the height of the row is the height of the container, that is, the height of the Flex child is the height of the container
Align-content: Adjust the middle distance between sub-items; This property applies only to multi-line alignments and does not work on one-line Flex containers;
stretch | flex-start | flex-end | center | space-between | space-around
Subitem attributes:
Order: This property is used to specify the order in which Flex children are sorted. The smaller the value, the higher the value, and can be negative.
Align-self: specifies the alignment of a Flex child individually;
auto | flex-start | flex-end | center | baseline | stretch
Align-items of the parent element is inherited, and if not, stretch is default.
Flex: Compound properties:
Is a shorthand property for flex-grow, flex-shrink, and Flex-basis, which specifies how flex subentries allocate space.
Flex: none; => flex: 0 0 auto; flex: auto; => flex: 1 1 auto; flex: 1; => flex: 1 1 0%; flex: 0 auto; Or flex: initial; => flex: 0 1 auto; That is, all three are default valuesCopy the codeThe flex – turns up:
The Flex container allocates the remaining space based on the scale set by the Flex child. Value: A value. The default value is 0, indicating that the Flex child does not expand even if there is free space.
The flex – the shrink:
The Flex container will shrink each Flex child according to the specified shrink ratio of the Flex child.
Value: Number. The default value is 1, which indicates that all subentries shrink proportionally when the remaining space is negative
Note: Flex-shrink can only be used without line breaking.
The flex – the basis:
Used to specify the space occupied by the base of a Flex subitem. Both flex-grow and flex-shrink are done on a flex-basis basis. The calculation of how much flex-grow and shrink is described below.
Values: the default value is auto percentage | | | length/width of the content
[🍉 difficult points] Several representations of flex subitems:
This difficulty is the original intention that writes this article!
1.0 When neither the value of the flex-basis nor the value of width (or height) is auto (i.e., fixed values px, percentage, or value are set) :
1.1 If the length of the content is greater than both the value of Flex-basis and width (or height), the value between flex-basis and width (or height) shall be used (as shown below: purple block shall be 120px).
However, if the child sets overflow: Hidden; Or overflow: auto; , the flex-basis value shall prevail (as shown below: 33.33% for purple blocks);
1.2 If the length of the content is smaller than both the flex-basis value and the width (or height) value, the Flex-basis value shall prevail. (As shown below: 33.33% for both);
1.3 If the length of the content is smaller than the value of Flex-basis and larger than the value of width (or height), the flex-basis value is used.
1.4 If the length of the content is greater than the flex-basis value and less than the width (or height) value, the length of the content itself shall prevail;
2.0 When width (or height) is auto:
If the length of the content is greater than the value set by Flex-basis, the length of the content itself is used, and flex-shrink is not allowed. Conversely, if the length of the content is less than the flex-basis value, the flex-basis value is used.
3.0 If there is a minimum min-width (min-height) value and the flex-basis value is smaller than the minimum value, the minimum value prevails; if the flex-basis value is larger than the minimum value, the flex-basis value prevails. Min-width has a higher weight.
4.0 Flex-shrink is enabled when the sum of the width of all child elements is greater than the width of the parent element and flex-shrink is greater than 1.
.container {
display: flex;
width: 300px;
height: 300px;
margin-top: 20px;
}
.left {
flex: 1 2 200px;
background: #4d9df8;
}
.right {
flex: 2 1 250px;
background: yellowgreen;
}
Copy the codeThe width of left and right is calculated as follows:
Left width = left flex-basis – (left flex-basis + right flex-basis – parent width) * (left flex-basis * left Flex-basis)/(left flex-basis * left flex-basis + right flex-basis * right flex-basis))
5.0 Flex-grow is enabled when the sum of the widths of all child elements is smaller than the width of the parent element and flex-grow is greater than 1.
.container {
display: flex;
width: 730px;
height: 300px;
margin-top: 20px;
}
.left {
flex: 1 2 200px;
background: #4d9df8;
}
.right {
flex: 2 1 250px;
background: yellowgreen;
}
Copy the codeThe width of left and right is calculated as follows:
Left flex-basis + (parent width-left flex-basis-right flex-basis) * left flex-grow/(left flex-grow + right The flex – turns)
The Grid layout
A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides” (a two-dimensional layout), handling both rows and columns. The Grid layout is far more powerful than the Flex layout.
Some of my own special layouts with Grid:
Property to quickly index a directory
Container attribute
instructions
Subitem attributes
instructions
grid-template
grid-columns/rows
grid-template-areas
grid-area
grid-gap
justify-self
place-items
align-self
place-content
place-self
grid-auto-flow
Control the placement of grid subitems that are not explicitly located;
grid-auto-rows/columns
Implicit grid property specification
1. Container properties
1.1.0 display properties
Display: grid; display: inline-grid;Copy the codeNote that the grid layout invalidates float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for the container’s child elements (items).
1.2.0 Grid-template-columns attribute, grid-template-rows attribute
Once the container has specified the grid layout, the next step is to partition the rows and columns. The grid-template-columns attribute defines the column width of each column, and the grid-template-rows attribute defines the row height of each row.
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; The grid - the template - the columns: 33.33% 33.33% 33.33%; The grid - the template - rows: 33.33% 33.33% 33.33%; } .container { display: grid; The grid - the template - the columns: repeat (3, 33.33%); The grid - the template - rows: repeat (3, 33.33%); } // Use auto-fill to fill as many cells as possible in a row or column if the width or height of a single cell is fixed. repeat(auto-fill, 100px); // The grid layout provides the fr keyword (abbreviated to fraction) for ease of representation of proportion relationships. If the columns are 1fr and 2FR wide, the latter is twice as large as the former. grid-template-columns: 100px 1fr 2fr; Minmax grid-template-columns: 1fr 1fr minmax(100px, 1fr); // Adaptive grid-template-columns: 100px auto 100px; Container {display: grid; // Define grid lines (4 vertical lines, 4 horizontal lines). grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }Copy the code1.3.0 Grid-row-gap attribute, grid-column-gap attribute, grid-Gap attribute
Sets the spacing between grid rows and columns
.container {
grid-row-gap: 20px;
grid-column-gap: 10px;
}
.container {
grid-gap: 20px 10px;
}
Copy the code1.4.0 grid – the template – areas attribute
Divide cells into regions
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; } // a b c d e f g h I each letter corresponds to one of the 9 cells (grid subitems)Copy the code1.5.0 grid – auto – flow properties
Set the principles of grid layout;
Default value row is ranked first and then sorted. Column C. row-dense grid-auto-flow: row; // Default grid-auto-flow: column; grid-auto-flow: row-dense; Grid-auto-flow: column-dense; // fill the column as much as possible without leaving any SpacesCopy the code1.6.0 context-items; The align – the items property; Place – the items property
Alignment of cell contents:
.container { justify-items: start | end | center | stretch; / / stretch stretching dominated the align - items: start | | end center | stretch; } // place-items: start end; // justify-items align-itemsCopy the code1.7.0 context-content attribute; The align – content attribute; Place – the content attribute
The justify-content attribute is the horizontal (left, middle, and right) position of the entire content area in the container, and the align-content attribute is the vertical (top, middle, and bottom) position of the entire content area.
.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; Instituted; // place-content: space-around space-instituted;Copy the code1.8.0 Grid-auto-columns and grid-auto-rows properties
The grid-auto-columns and grid-auto-rows properties are used to set the column width and row height of the extra grid automatically created by the browser when there are subitems in the grid that exist outside the layout.
They are written exactly the same as grid-template-columns and grid-template-rows. If these two attributes are not specified, the browser determines the column width and row height of the new grid solely based on the size of the cell content.
2. Project attributes
2.1 Grid-column-start /end, grid-row-start/end attributes
Define some properties of the starting and ending grid lines of the project border according to the container grid lines;
2.1.1 Basic Usage
Grid-column-start: the vertical grid line where the left border is;
Grid-column-end property: vertical gridline where the right border is;
Grid-row-start: the horizontal grid line on which the top border is;
Grid-row-end: the horizontal grid line with the bottom border;
.item-1 {// Specify the position of the project's four borders grid-column-start: 1; Grid-column-end: 3; grid-column-end: 3; Grid-row-start: 2; grid-row-start: 2; Grid-row-end: 4; grid-row-end: 4; // The bottom border is the fourth grid line}Copy the codeWhen specifying a grid line, you can use a grid line name as well as a numerical value.
2.1.2span Keyword
The values of these four attributes can also be used with the SPAN keyword, which means “span”, or how many grids are crossed between the left and right (top and bottom) borders.
.item-1 { grid-column-start: span 2; // The left border to the right border spans 2 grids; }Copy the code
A rendering of the span keyword
Using these four attributes, if an overlap of items occurs, the z-index attribute specifies the order in which the items are overlapped.
2.1.3 Combined abbreviations
// Specify the position of the item's four borders grid-column: 1/3; // Specify the position of the item's four borders grid-column: 1/3; grid-row: 2/4; } // or use the span keyword. Item-1 {// Specify the position of the four borders of the item grid-column: 1/span 2; grid-row: 2/span 3; }.item-1 {// slash can be omitted, default across a grid line, the effect is shown below; grid-column: 1; grid-row: 1; }Copy the code
The default spans the first grid line
2.2 the grid – area property
Property specifies which zone the project is placed in, either by zone name or by grid line position.
.container-areas { display: inline-grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; /* Divide containers into areas and name them */ grid-template-areas: 'backBtn title header' 'nav container container' 'footer.. '; } /* backBtn {background-color: #c077af; background-color: #c077af; /* Grid-area: backBtn; /* Grid-area: backBtn; color: #fff; } .areasitem-header { background-color: #4dc7ec; grid-area: header; color: #fff; Background-color: #ef342a; background-color: #ef342a; background-color: #ef342a; // 2/4/3/1 are the positions of upper, lower, right, and left grid lines respectively; grid-area: 2 / 4 / 3 / 1; }Copy the code2.3 context-self, align-self attributes
Set horizontal and vertical positions of cell contents, similar to justify-items and align-items, but only for a single item;
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
Copy the codeCombined short form:
place-self: center center;
Copy the codeThree, reference links:
Nguyen event:
www.ruanyifeng.com/blog/2019/0…
Zhang Xinxu:
www.zhangxinxu.com/wordpress/2…
4, Grid other knowledge points
- In Grid layout, float, display:inline-block, display:table-cell, vertical-align, and column-* properties and declarations have no effect on Grid subitems.