In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
Editor to share with you what are the differences between grid and flex in css3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The difference between grid layout and flex layout in css3 is that flex layout is based on one-dimensional, the main purpose is to provide a more effective way to set layout, while grid layout is based on two-dimensional grid layout system, the main purpose is to change the user interface based on network design.
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the difference between grid and flex in css3? to sum up: flex is an one-dimensional layout, grid is a two-dimensional layout, that is, grid layout can better manipulate rows and columns. Flex layout and grid layout are the two mainstream layout methods. Flex layout what is a flex layout
All into flexible Box means elastic box.
Elastic box is a new layout mode of CSS3. Compared with the traditional layout method which depends on display+position+float, the elastic box arranges, aligns and allocates blank space of the child elements in a container in a more efficient way.
How to use / / any container can be specified as a Flex layout, all you need is to add a line display: flex;//, display: inline-flex if it is an inline element
Note that when set to the Flex layout, the float, clear, and vertical-align attributes of the child elements will be invalidated
Related concepts
The element specified as the Flex is called a "container", and the child elements in the container become its "project", and an element can be both a container and a project.
As shown in the image above, there are two axes in a container, which defaults to the horizontal axis of the principal axis and the vertical axis of the cross axis. By default, the items in the container are arranged along the principal axis.
Container attribute (I like to understand as parent element attribute) flex-direction: this attribute determines the direction of the principal axis / / attribute value is: row / / default principal axis is horizontal, the starting point is horizontal on the left row-reverse / / spindle, the starting point is vertical on the right column / / spindle, and the starting point is vertical on the upper column-reverse / / spindle. The starting point is below.
Flex-wrap: whether to wrap / / the attribute value is: nowrap / / (default) No line wrapping wrap / / the first line is wrapped above wrap-reverse / / and the first line is placed below. Flex-flow attribute is an abbreviated form of flex-direction attribute and flex-wrap attribute. The default value is row nowrap.box {flex-flow: | The justify-content property defines the alignment of the project on the spindle. Flex-start / / (default): left-aligned flex-end / / right-aligned center / / Center space-between / / both ends are aligned so that the spacing between items is equal. Space-around / / the intervals on both sides of each item are equal. Therefore, the interval between items is twice as large as the interval between the project and the border.
The align-items property defines how the project aligns the start point of the flex-start / / cross axis on the cross axis. The end points of the flex-end / / cross axes are aligned. The midpoint of the center / / cross axis is aligned. The baseline alignment of the first line of text of the baseline / / project. Stretch / / (default) if the project is not set to height or is set to auto, it will occupy the height of the entire container.
The align-content property defines the alignment of multiple axes. If the project has only one grid line, this property does not work flex-start / / align with the start point of the cross axis. Flex-end / / is aligned with the end of the cross axis. Center / / is aligned with the midpoint of the cross axis. Space-between / / is aligned with both ends of the cross axis, and the spacing between the axes is evenly distributed. Space-around / / the intervals on both sides of each axis are equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame. Stretch / / (default) axis occupies the entire cross axis.
The attributes of the project (understood as child element attributes) the orderflex-growflex-shrinkflex-basisflexalign-selforder attribute defines the order in which the items are arranged. The lower the number, the higher the arrangement, and the default is 0. .item {order:;}
The flex-grow property defines the magnification of the project, which defaults to 0, that is, it is not zoomed in if there is any remaining space. .item {flex-grow:; / * default 0 * /}
If all items have a flex-grow property of 1, they will divide the remaining space equally, if any. If the flex-grow property of one project is 2 and all other projects are 1, the former will occupy twice as much remaining space as the other items.
The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink. .item {flex-shrink:; / * default 1 * /}
If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space. A negative value is not valid for this property.
The flex-basis attribute defines the principal axis space (main size) occupied by the project before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project. .item {flex-basis: | auto; / * default auto * /}
It can be set to the same value as the width or height property (such as 350px), and the project will occupy a fixed space.
The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto. The last two attributes are optional. .item {flex: none | [? | |]}
This property has two shortcut values: auto (1 1 auto) and none (0 auto).
It is recommended that you give priority to using this property rather than writing three separate properties separately, because the browser calculates the relevant values.
The align-self property allows a single project to be aligned differently from other items, overriding the align-items property. The default value is auto, which inherits the align-items attribute of the parent element, which is equivalent to stretch if there is no parent element. .item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}
This attribute may take six values, all of which are exactly the same as the align-items property except auto.
Overview of grid layout
Grid layout (Grid) is the most powerful CSS layout scheme.
It divides the web page into grids and can arbitrarily combine different grids to make a variety of layouts. Previously, the effect that could only be achieved through the complex CSS framework is now built into the browser.
The layout pictured above is a specialty of Grid layout.
The Grid layout is similar to the Flex layout in that you can specify the location of multiple items within the container. However, there are significant differences between them.
Flex layout is an axis layout, which can only specify the location of the "project" for the axis, which can be regarded as an one-dimensional layout. Grid layout divides the container into "rows" and "columns", produces cells, and then specifies the cells where the project is located, which can be regarded as a two-dimensional layout. Grid layouts are far more powerful than Flex layouts.
Basic Concepts containers and projects
An area with a grid layout is called a "container". The interior of the container uses grid-positioned child elements, called "item".
one
two
three
In the above code, the outermost p element is the container, and the three p elements in the inner layer are the project.
Note: a project can only be a top-level child element of the container and does not contain child elements of the project. For example, the p element of the above code is not a project. The Grid layout is valid only for the project.
Rows and columns
The horizontal area inside the container is called "row" and the vertical area is called "column".
Cell
The intersection of rows and columns is called a "cell".
Normally, n rows and m columns produce n x m cells. For example, three rows and three columns produce nine cells.
Grid line
The lines that divide the grid are called "grid line". Horizontal grid lines are divided into travel, and vertical grid lines are divided into columns.
Normally, n rows have n + 1 horizontal grid lines, m columns have m + 1 vertical grid lines, for example, three rows have four horizontal grid lines.
The image above is a 4 x 4 grid with 5 horizontal and 5 vertical gridlines.
Container Properti
The properties of the Grid layout fall into two categories. One is defined on top of the container, which is called container properties, and the other is defined on top of the project, called project properties. This section first introduces the container properties.
Display: grid specifies that a container uses a grid layout p {display: grid;}
The image above shows the effect of display: grid
By default, container elements are block-level elements, but can also be set as inline elements.
The code above p {display: inline-grid;} specifies that p is an inline element with a grid layout inside.
Note that when the grid layout is set, the settings of float, display: inline-block, display: table-cell, vertical-align and column-* of the container child elements (project) will become invalid
The grid-template-columns attribute defines the column width of each column; 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;}
The above code specifies a grid of three rows and three columns, with the column width and row height being 100px.
/ / in addition to absolute units, you can also use percentages. Container {display: grid; grid-template-columns: 33.33% 33.33%; grid-template-rows: 33.33% 33.33%;}
(1) repeat ()
Sometimes, it is troublesome to repeat the same value, especially when there is a lot of grid. At this point, you can use the repeat function to simplify duplicate values. The above code is rewritten with repeat () as follows.
.container {display: grid; grid-template-columns: repeat (3,33.33); grid-template-rows: repeat (3,33.33);}
Repeat () accepts two arguments, the first of which is the number of times to repeat (3 in the previous example), and the second is the value to be repeated.
Grid-template-columns: repeat (2, 100px 20px 80px)
The above code defines 6 (repeat 2 times, three columns at a time) column, the width of the first and fourth columns is 100px, the second and fifth columns 20px, and the third and sixth columns 80px.
(2) auto-fill keyword
Sometimes, the size of the cell is fixed, but the size of the container is uncertain. If you want each row (or column) to hold as many cells as possible, you can use the auto-fill keyword to indicate automatic padding.
.container {display: grid; grid-template-columns: repeat (auto-fill, 100px);}
(3) fr keyword
To facilitate the representation of proportional relationships, the grid layout provides the fr keyword (the abbreviation of fraction, which means "fragment"). If the widths of the two columns are 1fr and 2fr respectively, the latter is twice as wide as the former.
.container {display: grid; grid-template-columns: 1fr 1fr.}
Fr can be used in combination with units of absolute length, which is very convenient.
/ / the width of the first column is 150 pixels, and the width of the second column is half that of the third column. .container {display: grid; grid-template-columns: 150px 1fr 2fr;}
(4) minmax
The minmax () function produces a range of length, indicating that the length is within that range. It accepts two parameters, the minimum and the maximum.
Grid-template-columns: 1fr 1fr minmax (100px, 1fr)
Minmax (100px, 1fr) indicates that the column width is not less than 100px and not less than 1fr.
(5) auto keyword
The auto keyword means that the length is determined by the browser itself.
Grid-template-columns: 100px auto 100px
In the above code, the width of the second column is basically equal to the maximum width of the cell in that column, unless the cell content is set to min-width, and this value is greater than the maximum width.
(6) the name of the grid line
In the grid-template-columns property and the grid-template-rows property, you can also use square brackets to specify the name of each grid line for future reference.
.container {display: grid; grid-template-columns: [C1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [R1] 100px [R2] 100px [R3] auto [R4];}
The above code specifies that the grid layout is 3 rows x 3 columns, so there are 4 vertical grid lines and 4 horizontal grid lines. Inside the square brackets are the names of the eight lines in turn.
Grid layout allows multiple names for the same line, such as [fifth-line row-5]
(7) layout example
The grid-template-columns property is very useful for page layouts. A two-column layout requires only one line of code.
.wrapper {display: grid; grid-template-columns: 70% 30%;}
The traditional 12-grid layout is also easy to write.
Grid-template-columns: repeat (12, 1fr); grid-row-gap property sets row-to-row spacing (row spacing), grid-column-gap property sets column-column spacing (column spacing) grid-gap attribute grid-column-gap and grid-row-gap combined abbreviation grid-gap:; / / if the first value is omitted, the second value is equal to the first value by default. Container {grid-row-gap: 20px Grid-column-gap: 20px;}
According to the latest standard, the grid- prefixes of the above three attribute names have been deleted, and grid-column-gap and grid-row-gap are written as column-gap and row-gap,grid-gap as gap.
Grid-template-areas attribute
The grid layout allows you to specify a "area", a region consisting of single or multiple cells. The grid-template-areas property is used to define the area.
.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';} / / the above code divides into nine cells and then names them nine ranges from a to I, corresponding to each of these nine cells. / / multiple cells are merged into a range as follows. Grid-template-areas:'an an a'b b b'c c c'
Here is an example of a layout.
Grid-template-areas: "header header header", "main main sidebar", "footer footer footer"
In the above code, the top is the header area header, the bottom is the footer area footer, and the middle part is main and sidebar.
If some areas do not need to be utilized, use a "dot" (.) representation.
Grid-template-areas:'a. C'd. F'G. I want to share the attribute of gridmai automai flow
After the grid is divided, the child elements of the container are automatically placed on each grid in order. The default placement order is "first row, then column", that is, fill the first row first, and then start placing the second row. This order is determined by the grid-auto-flow property, and the default value is row, that is, "first column". You can also set it to column to "column first and row later".
In addition to setting the grid-auto-flow property to row and column, you can also set to row dense and column dense. These two values are mainly used for how to automatically place the remaining items after some projects specify the location. The following example allows items 1 and 2 to occupy two cells each, and then produces the following layout in the default grid-auto-flow: row case.
In the image above, the position behind Project 1 is empty, because Project 3 follows Project 2 by default, so it will be ranked after Project 2. Now change the setting to row dense, which means "first and then column" and fill it as closely as possible with as few spaces as possible.
Grid-auto-flow: row dense
The image above will fill the first line and then the second line, so item 3 will follow item 1. Items 8 and 9 will be on the fourth line. If you change the setting to column dense, it means "column before row" and fill in the blanks as much as possible.
The figure above will fill the first column and then the second column, so item 3 is in the first column and item 4 is in the second column. Items 8 and 9 were squeezed into the fourth column.
The justify-items property sets the horizontal position of the cell content, the align-items property sets the vertical position of the cell content (top, middle and bottom), and the combined shorthand form of the place-items property align-items property and the justify-items property. If the second value is omitted, the browser considers it equal to the first value. The horizontal position of the entire content area of the justify-content attribute in the container (left, middle and right), and the vertical position of the entire content area of the align-content attribute (top, middle and bottom). The place-content attribute is a combined abbreviated form of the align-content property and the justify-content property. .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;} start-aligns the starting border of the container. End-aligns the end border of the container. Center-the container is centered inside. Stretch-when the project size is not specified, the extrusion occupies the entire grid container. Space-around-the intervals on both sides of each item are equal. Therefore, the interval between items is twice as large as the interval between the project and the container border. Space-between-the project is evenly spaced from project to project, and there is no spacing between the project and the container border. Space-evenly-the interval between the project and the project is equal, and the interval between the project and the container border is the same length. The grid-auto-columns property is used to set the column width of the excess grid automatically created by the browser, and the grid-auto-rows property is used to set the row height of the excess grid automatically created by the browser.
They are written in exactly the same way as grid-template-columns and grid-template-rows. If you do not specify these two properties, the browser determines the column width and row height of the new grid based entirely on the size of the cell contents.
.container {display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px;}
The above code specifies that the new row height is unified as 50px (the original row height is 100px).
Grid-template attribute, grid attribute
The grid-template attribute is a combined shorthand form of the three attributes grid-template-columns, grid-template-rows, and grid-template-areas.
The grid attribute is a combined shorthand of the six attributes: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
From an easy-to-read and easy-to-write point of view, it is still recommended not to merge attributes, so I will not cover these two attributes in detail here.
The project property grid-column-start property sets the vertical grid line of the left border, the vertical grid line of the right border of the grid-column-end property, the horizontal grid line of the top border of the grid-row-start property, and the horizontal grid line of the lower border of the grid-row-end property. Item-1 {grid-column-start: 2; grid-column-end: 4;}
The above code specifies that the left border of item 1 is the second vertical grid line and the right box is the fourth vertical grid line.
In the image above, only the left and right borders of item 1 are specified, and no upper and lower borders are specified, so the default position is adopted, that is, the top border is the first horizontal grid line, and the bottom frame is the second horizontal grid line.
With the exception of item 1, none of the projects specify a location and are automatically laid out by the browser, so their location is determined by the container's grid-auto-flow property, which defaults to row, so it is arranged "first and then column". Readers can change the value of this property to column, row dense, and column dense to see how the location of other projects has changed.
Item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}
The values of these four properties can also be specified as the name of the grid line, in addition to the grid line.
.item-1 {grid-column-start: header-start; grid-column-end: header-end;}
The values of these four properties can also use the span keyword to indicate "span", that is, how many grids are spanned between the left and right borders (upper and lower borders).
.item-1 {grid-column-start: span 2;}
The above code indicates that the left border of item 1 spans 2 grids from the right border.
The combined shorthand form of the grid-column attribute grid-column-start and grid-column-end. The grid-row attribute is the combined shorthand form of the grid-row-start attribute and grid-row-end. Item {grid-column: /; grid-row: /;}
Project item-1 occupies the first line, from the first column line to the third column line.
Item-1 {grid-column: 1 / 3; grid-row: 1 / 2;} / * equals * / .item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;}
Of these two attributes, the span keyword can also be used to indicate how many grids are spanned.
The area occupied by the project item-1, including the first row + second row and the first column + second column
Item-1 {background: # b03532; grid-column: 1 / 3; grid-row: 1 / 3;} / * equals * / .item-1 {background: # b03532; grid-column: 1 / span 2; grid-row: 1 / span 2;}
The slash and the following part can be omitted and span a grid by default.
.item-1 {grid-column: 1; grid-row: 1;}
The above project item-1 occupies the first grid in the upper left corner
The grid-area property specifies the area in which the item is placed. Item-1 {grid-area: e;}
Project No. 1 is located in area e and the effect is shown in the following figure.
The grid-area attribute can also be used as a merge shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end to directly specify the location of the project.
.item {grid-area: / } the justify-self property sets the horizontal position of the cell content (left, middle and right), the align-self property sets the vertical position of the cell content (top, middle and bottom), and the place-self property is the combined abbreviation of the align-self property and the justify-self property. The justify-self property sets the horizontal position of the cell content (left, middle and right), which is exactly the same as the use of the justify-items property, but only works on a single project. The align-self property sets the vertical position of the contents of the cell (top, middle and bottom), which is exactly the same as the use of the align-items property, and only works on a single item. .item {justify-self: start | end | center | stretch; align-self: start | end | center | stretch;} start: align the leading edge of the cell. End: aligns the end edge of a cell. Center: the cell is centered inside. Stretch: stretch to fill the entire width of the cell (default). .item-1 {justify-self: start;}
These are all the contents of this article entitled "what are the differences between grid and flex in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
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.
Views: 264
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.