Flex and Grid layout for CSS

In daily work, the front end often deals with layout. Position and float, although they have their own characteristics, are also prone to problems. Here is a brief introduction to two powerful layouts: Flex and Grid and some simple application examples.

1. Flex layout

Here the reference www.jianshu.com/p/4290522e1…

Elements that use flex layout are called containers and need to be set to display:flex; The elements that a container contains are its children. Container and subitems have their own style attributes; The attributes of the container are used to lay out the children, and the attributes of the children are used to lay out the contents and elements they contain.

1.1 Commonly used container attributes are:

flex-direction;
flex-wrap;
flex-flow;
justify-content;
align-items;
align-content;
Copy the code

1.1.1 flex – direction attribute

This property is mainly control the arrangement direction of children, the attribute value are: row | row – reverse | column | column – reverse

Row: children arranged horizontally, from left to right;

Row-reverse: The child items are aligned horizontally, from right to left;

Column: the children are arranged vertically, from top to bottom;

Column-reverse: the sub-items are arranged vertically from bottom to top;

1.1.2 flex – wrap attributes

This property mainly controls the way the subitems are arranged in line breaks. Attribute values are: nowrap | wrap | wrap – reverse

Nowrap: no line breaks;

Wrap: line;

Wrap-reverse: wrap a line, but the first line is underneath;

1.1.3 flex – flow properties

This attribute is a combination of flex-direction and flex-wrap attributes.

        flex-flow: row nowrap;

1.1.4 the justify – content attribute

This property is a common property that controls the alignment of the child items in the flex-direction direction. The attribute values are:

       flex-start | flex-end | center | space-between | space-around

Flex-start: align from the beginning of spindle;

Flex-end: align from the end of the spindle;

Center: center it along the main axis

Space-between: both ends are aligned with the same spacing between sub-items.

Space-around: indicates that both ends of a child item have the same spacing.

1.1.5 the align – the items property

This property defines the way it works on the cross axis (relative to the cross axis of the Flex-direction axis); Attribute values are: flex – start | flex – end | center | baseline | stretch |

Flex-start: alignment of the beginning of the cross axis;

Flex-end: alignment of the ends of the cross axes;

Center: center alignment of intersecting axes;

Baseline: baseline alignment of the first line of the subitem;

“Stretch” : the subitem has no height or “auto”. This property will fill up the height of the container.

1.1.6 align – content attribute

This attribute defines the alignment mode of multiple axes, which can be understood as the alignment mode of multiple subitems. Using this attribute for a single subitem has no effect.

Attribute values are: flex – start | flex – end | center | space – between | space – around | stretch

Flex-start: align with the starting point of the cross axis;

1.2 Common subitem attributes are:

The order; flex-grow; flex-shrink; flex-basis; flex; align-self;Copy the code

1.2.1 order attribute

This attribute defines the order of subitems. The smaller the number is, the higher the number is. The default value is 0.

1.2.2 flex – turns up properties

The default value of this attribute is 0. It mainly defines the proportion of the width or height of the items in a row or column. If the value of this attribute is the same for the items in a row, the proportion is the same. If the value is larger, the proportion is larger; Ratio 2 is twice as much as ratio 1; If only one of its other children has this property set, then that child will occupy the remaining space;

1.2.3 flex – the shrink properties

This property defines the scale of the child items; The default value is 1. If the space is insufficient, the subentries will be shrunk. If the flex-shrink attribute of a subitem is set to 0, the other subitems scale when space is insufficient, but the subitem does not scale. (Use this property to solve the newline alignment problem)

1 the flex – the basis properties

This property is not commonly used and defines the main size of the project before allocating extra space. Based on this property, the viewer calculates whether the spindle has extra space. Its default value is Auto, the original size of the project;

1.2.5 flex properties

This property is a combination of the flex-grow, Flex-shrink, and Flex-basis properties,

Default value: flex: 0 1 auto;

1.2.6 the align – self properties

This property allows children to have their own alignment from the align-items property of the container. The default value is auto;

Attribute values are: auto | flex – start | flex – end | center | baseline | stretch

Property value has the same function as align-items;

1.3 Relevant examples and knowledge points

1.3.1 Flex examples

Here are some examples of mobile, similar to PC;

1, commonly used is the center layout; The code is as follows:

.container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}
Copy the code

2, text alignment, line feed

< div class = "w - style" > < span class = "right - margin" > task site < / span > < span class = "time - style" > * * * * * * * site < / span > < / div >. W - style {  display: flex; flex-direction: row; font-size: 12px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; Color: rgba(20, 40, 65, 0.5); .time-style { color: #142841; } .right-margin { margin-right: 15px; width: 48px; flex-shrink: 0; }}Copy the code

3. You can use Flex layout as follows:

          

The code is as follows:

<div class="mint-content"> <div class="content-box" v-for="index in 5" :key="index"> <div class="box-left"> <div Class = "dot" > < / div > < div class = "line" > < / div > < / div > < div class = "box - right" > < p > < span > 2020.08.18 michal < / span > <div class="task-tip"> </div> <div class="task-content"></div> </div> </div> </div> </div> </div> </div> .content-box { margin: 0 15px; display: flex; flex-direction: row; .box-left { display: flex; margin-right: 10px; flex-direction: column; transform: translateY(10px); .dot { width: 10px; height: 10px; border-radius: 5px; Background-color: rgba(20, 40, 65, 0.3); } .line { margin-left: 4px; width: 1px; flex: 1; Background: RGBA (20, 40, 65, 0.3); } } .box-right { flex: 1; p { margin-top: 5px; Color: rgba(20, 40, 65, 0.6); } span:last-child { margin-left: 10px; color: brown; } } .task-detail { margin: 15px; .task-tip {color: rgba(20, 40, 65, 0.6); } .task-content { margin-top: 10px; Background: RGBA (20, 40, 65, 0.1); width: 100%; height: 160px; }}}}Copy the code

4. Grail layout;

1.3.2: At the same time, you can still use display:flex to layout its own internal elements.

Form nested independent modules;

Summary: We can also see flex layouts, which usually deal with one-dimensional layouts. Using Flex nesting can handle two-dimensional layouts, such as the Holy Grail layout, but there is a better layout for two-position layouts, which is the Grid layout.

2. Grid layout:

Grid implements a grid layout that controls both rows and columns. Details can be found in this excellent article juejin.cn/post/685457… ; The Grid layout also has container attributes and child attributes; Here is a brief summary:

2.1 Container Properties

grid-template-columns; grid-template-rows; grid-auto-columns; grid-auto-rows; grid-row-gap; grid-column-gap; grid-gap; grid-template-areas; grid-auto-flow; justify-items; align-items; justify-content; align-content; place-content;Copy the code

2.1.1 Grid-template-columns and grid-template-rows:

Grid-template-columns: Controls the (explicit) width of columns;

Grid-template-rows: control rows’ (explicit) height;

.contaainer { grid-template-columns: 200px 200px 200px; /* Each column has the same width, simply repeat(3,200px)*/ grid-template-rows: 100px 200px; grid-gap:20px; /* * * */Copy the code

The width of each category is 200px. The height of the first row is 100 and the height of the second row is 200px.

2.1.2 Grid-auto-columns and grid-auto-rows:

Grid-auto-columns: controls (implicit) column width;

Grid-auto-rows: controls (implicit) row height;

Grid-template-columns and grid-template-rows are grid-template-rows attributes: If the corresponding row and column size is set, it is displayed. If the corresponding row and column size is exceeded, grid-auto-columns and grid-auto-rows attributes should be used to set the corresponding column width and row height, then it is implicit.

The grid-template-columns and grid-template-rows attributes, as well as grid-auto-columns and grid-auto-rows attributes, can be mixed in some cases, such as:

If 1, 3 columns have more than one row, the row height is 200px and the column width is 200px;

The grid - the template - the columns: repeaat (3200 px); grid-auto-flow: row; /* Control the layout direction */ grid-auto-rows:200px;Copy the code

2, 3 rows, multiple columns,

The grid - the template - rows: repeaat (3200 px); grid-auto-flow:column; /* Control layout */ grid-auto-columns:200px;Copy the code

2.1.3 Grid-row-gap and Grid-Column-gap and grid-Gap attributes:

These three attributes are used to control the spacing of subitems, as the name implies:

Grid-row-gap: controls the spacing between rows;

Grid-column-gap: controls the spacing between columns; grid-column-gap: controls the spacing between columns.

Grid-gap: is a short form of the former two, the new version abandoned the above several attributes, using the gap attribute;

2.1.4 Context-items, align-items, and place-items

These three attributes control the alignment of content in the subitems, respectively:

Context-items control horizontal positions: left, center, right, and stretch fill the subitems;

Align-items control the vertical position: up, middle, down and stretch fill the sub-items

Place-items is a shorthand for the above two properties, in the order of align-items and context-items. If only one value is set, both properties are set to the same value;

.container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; Place-items: align-items property value justify-items property value; }Copy the code

2.1.5 context-content, align-content, and place-content properties

These three properties are similar to flex’s container properties, except that they manipulate multiple rows and columns;

Context-content: the horizontal position of the entire content area inside the container (left, middle and right);

Align-content: The vertical position of the entire content area (upper, middle, lower);

Place-content: is a short form of the preceding two attributes, in the order of align-content and context-content.

.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;  
}
Copy the code

Space-around – Equal spacing on both sides of each subitem. So, the spacing between the children is twice as large as the spacing between the children and the container border

Space-between-children are equally spaced with children, and there is no space between children and container borders

The space- instituted – children evenly spaced with children, and of the same length between the children and the container border

Stretch – When the size of the subterm is not specified, stretch takes up the entire container

2.1.6 grid – the template – areas attribute

This attribute is used together with the grid-area attribute of the child items to divide certain layout areas. In the child items, grid-area is used to name the child items. In the container, grid-template-Areas is used to divide areas.

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
Copy the code

In the container, using the grid-template-areas attribute, the code is divided into 6 areas.”.” represents an empty area, and the areas with the same name are merged into a large area, as shown in the following figure:

2.2 Subitem attributes

grid-column-start;
grid-column-end;
grid-row-start;
grid-row-end;

grid-area;

justify-self;
align-self;
place-self;
Copy the code

2.2.1 Grid-column-start attribute, grid-column-end attribute, grid-row-start attribute and

The grid – row – end attribute

Grid divides a certain grid region according to the setting of rows and columns, which contains sub-items. The above four attributes are actually used to locate the regional position of sub-items by using grid lines.

Grid-column-start property: vertical gridline on which the left border is located

Grid-column-end property: vertical gridline with the right border

Grid-row-start property: the horizontal grid line on which the top border is located

Grid-row-end property: horizontal gridline on which the bottom border is located

.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; grid-auto-rows: minmax(100px, auto); } .one { grid-column-start: 1; grid-column-end: 2; background: #19CAAD; } .two { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; /* if there is overlap, use z-index */ z-index: 1; background: #8CC7B5; } .three { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; background: #D1BA74; } .four { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 5; background: #BEE7E9; } .five { grid-column-start: 2; grid-column-end: 2; grid-row-start: 2; grid-row-end: 5; background: #E6CEAC; } .six { grid-column: 3; grid-row: 4; background: #ECAD9E; }Copy the code

2.2.2 the grid – area property

It can be understood as being used in children, naming children; Commonly used with grid-template-areas attributes;

2.2.3 context-self, align-self, and place-self

The context-self attribute sets the horizontal position of the content of a child item (center left), exactly the same as the context-items attribute, but only for a single child item

The align-self property sets the vertical position (top, middle, bottom) of the content of the child item, exactly as the align-items property is used, and only applies to a single child item

Place-self is shorthand for setting align-self and context-self

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
Copy the code

2.3 Use Cases

<div class="sport-box">        <div          class="sport-item"          v-for="(item, index) in EventList"          :key="item.EventId"          :style="{background: getBgColor(index)}"        >        </div>      </div>

.sport-box {  padding: 15px 13px;  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-auto-flow: row;  grid-auto-rows: 100px;  gap: 10px;  .sport-item {    border-radius: 6px;    box-shadow: 0px 2px 4px 0px rgba(0, 145, 250, 0.35);    text-align: center;    img {      margin: 11px auto 0px;    }  }}
Copy the code