Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "Flex layout and Grid layout example analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "Flex layout and Grid layout example analysis" article can help you solve your doubts, the following follow the editor's ideas slowly in depth, together to learn new knowledge.

A flex layout is a page layout.

Properties of the container

1.display:flex/inline-flex

2.flex-direction determines the direction of the spindle (that is, the direction of the arrangement of items)

Flex-direction:row | row-reverse | column | column-reverse

Row (default): the principal axis is horizontal and the starting point is at the left end.

Row-reverse: the principal axis is horizontal, and the starting point is at the right end.

Column: the principal axis is vertical, and the starting point is along the upper edge.

Column-reverse: the principal axis is vertical, and the starting point is at the lower edge.

3.flex-wrap decides whether to break lines, which is not allowed by default.

Flex-wrap:nowrap | wrap | wrap-reverse

4.flex-flow is the abbreviation of flex-direction and flex-wrap.

Flex-flow: |

5.justify-content determines the alignment of the project on the spindle.

Justify-content:flex-start | flex-end | center | space-between | space-around

Flex-start (default): align left

Flex-end: align to right

Center: Center

Space-between: both ends are aligned and 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.

6.align-item defines the vertical position through which you can center vertically

Align-items:flex-start | flex-end | center | baseline | stretch

Flex-start: the start point of the cross axis is aligned.

Flex-end: the end point of the cross axis is aligned.

Center: the midpoint alignment of the cross axis.

Baseline: the baseline alignment of the first line of text of the 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.

7.align-content defines the alignment of multiple axes. If the project has only one axis, this property does not work.

Align-content:flex-start | flex-end | center | space-between | space-around | stretch

Flex-start: aligns with the start point of the cross axis.

Flex-end: aligns with the end of the cross axis.

Center: aligns with the midpoint of the cross axis.

Space-between: aligned with both ends of the cross axis, 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): the grid line occupies the entire cross axis.

Grid layout is very good, but the compatibility is not very good, tested several browsers, support Google, Firefox, Opera, do not support safari,IE10 below, 360 QQ browser

1. Grid container

1.display:grid/grid-inline

The 2.grid-template-columns and grid-template-rows properties can explicitly set the columns and rows of a grid

The fr unit can help us create a projectile grid track. It represents the available space in the grid container (like the unitless value in Flexbox)

Grid-template-columns:1fr1fr2fr

The minmax () function creates the minimum or maximum size of the mesh track. The minmax () function accepts two parameters: the first parameter defines the minimum value of the grid orbit, and the second parameter defines the maximum value of the grid orbit. You can accept any length value, as well as autovalue. Auto values allow mesh tracks to stretch or squash based on the size of the content

Grid-template-rows:minmax (100pxMagol auto)

Grid-template-columns:minmax (auto,50%) 1fr3em

Repeat () can create duplicate mesh tracks. This applies to creating grid projects of equal size and multiple grid projects. Repeat () accepts two parameters: the first parameter defines the number of times the grid track should be repeated, and the second parameter defines the size of each track.

Grid-template-rows:repeat (3Jing 1fr)

Grid-template-columns:30pxrepeat (3Jing 1fr) 30px

2. Spacing

1.grid-column-gap creates the spacing between columns

2.grid-row-gap creates the spacing between rows

3.grid-gap

Grid-gap is an acronym for grid-row-gap and grid-column-gap, and if it specifies two values, the first value sets the value of grid-row-gap, and the second value sets the value of grid-column-gap. If only one value is set, rows and columns are equally spaced, which means that the values of grid-row-gap and grid-column-gap are the same.

3. Grid lines

1. [grid-row-start] [grid-row-end] [grid-column-start] [grid-column-end]

Grid lines allow you to locate grid projects. The grid line actually represents the beginning and end of the line, and there are grid columns or rows in between. Each line starts from the grid track, the grid lines of the grid start from 1, and each grid line gradually increases by 1.

Grid-row-start:2

Grid-row-end:3

Grid-column-start:2

Grid-column-end:3

2. [grid-row] [grid-column]

Grid-row is an abbreviation for grid-row-start and grid-row-end. Grid-column is an abbreviation for grid-column-start and grid-column-end. If only one value is provided, the grid-row-start (grid-column-start) value is specified; if two values are provided, the first value is the value of grid-row-start (grid-column-start) and the second value is the value of grid-row-end (grid-column-end), which must be separated by /

Grid-row:2

Grid-column:3/4

3. The keyword span is followed by a number to indicate how many columns or rows are merged

Grid-row:1/span3

Grid-column:span2

4. [grid-area] specify four values. The first value corresponds to grid-row-start, the second value corresponds to grid-column-start, the third value corresponds to grid-row-end, and the fourth value corresponds to grid-column-end

Grid-area:2/2/3/3

5. Grid line naming

The gridline name must be assigned with square brackets [gridline name], followed by the size value of the grid track.

Grid-template-rows: [row-1-start] 1F [row-2-start] 1F [row-2-end]

Grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1frr [col-3-end]

Use the repeat () function to assign the same name to gridlines.

Grid-template-rows:repeat (3, [row-start] 1fr [row-end])

Grid-template-columns:repeat (3, [col-start] 1fr [col-end])

Gridlines can be named using the repeat () function, which also causes multiple gridlines to have the same gridline name. The same gridline name specifies the location and name of the gridline, and the corresponding number is automatically added after the gridline name so that the gridline name is also a unique identifier

Use the same gridline name to set the location of the grid project. The names and numbers of gridlines need to be separated by spaces

Grid-row:row-start2/row-end3

Grid-column:col-start/col-start3

6. Grid region naming

The grid-template-areas reference grid area name can also set the grid project location

Grid-template-areas: "headerheader", "contentsidebar", "footerfooter"

Grid-template-rows:150px1fr100px

Grid-template-columns:1fr200px

The default flow direction of 7.grid-auto-flow grid is row. You can change the direction of grid flow to column through the grid-auto-flow attribute.

Grid-auto-flow:column

4. Alignment

[grid project alignment (BoxAlignment)]

CSS's BoxAlignmentModule complements the alignment of grid items along the grid row or column axis.

[justify-items]

[justify-self]

Justify-items and justify-self specify how grid items are aligned along row axes; align-items and align-self specify how grid items are aligned along column axes.

Justify-items and align-items are applied to grid containers

[align-items]

[align-self]

The align-self and justify-self properties are used for grid project self-alignment

These four properties mainly accept the following property values:

Auto | normal | start | end | center | stretch | baseline | firstbaseline | lastbaseline

After reading this, the article "Flex layout and Grid layout example Analysis" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are 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.