Flex Grid Layout and Layout .md

Grid layout, or Flex layout?

Differences in layout and grid layout of Flex?

Some people think: Flexbox for unidimensional, row or column. For two-dimensional grid layout, multiple rows and columns.

Some people think: using real grid columns and rows, the content will be a one, arranged in line by line. But Flexbox No, there is not only a two-dimensional, but is also true in one dimension inside. Flexbox does not apply to most of the features we've been using.

Most people think: the Grid for page-level layout, but will flexbox for everything else.

First look at a grid layout and Flex layout.

Grid Layout

Region using a grid layout, known as the "container" (container). The inner container using the locator sub-element called "Project" (item).

Horizontal area inside the container is referred to as "line" (row), perpendicular to the area as a "column" (column).

Row and column intersection region, referred to as "cells" (cell).

Meshing line, known as the "grid line" (grid line). Horizontal grid lines divide travel, vertical grid line dividing the column. Normally, there are n + 1 n-row plurality of horizontal grid lines, m columns have m + 1 for vertical grid lines, such as three rows have four horizontal grid lines.

grid

Grid layout attributes fall into two categories. Class defines a top of the container, called a container attribute; another item defined above, called a project property.

Container properties:

• display property: a container specified grid layout using
  • display: grid; By default, the container elements are block-level elements
  • display: inline-grid; elements arranged in rows within the
• grid-template-columns properties: each column defined in the column width
• grid-template-rows property: High definition of each row line
  • In addition to the ranks of absolute units, it can also be used percentage
    • grid-template-rows: 100px 100px 100px;
    • grid-template-columns: 33.33% 33.33% 33.33%;
  • repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值
    • grid-template-columns: repeat(3, 33.33%);
    • grid-template-columns: repeat(2, 100px 20px 80px); 定义了6列
  • auto-fill 关键字表示自动填充
    • grid-template-columns: repeat(auto-fill, 100px); 每列宽度100px，然后自动填充，直到容器不能放置更多的列
  • fr 关键字
    • grid-template-columns: 1fr 2fr; 两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
  • minmax()
    • grid-template-columns: 1fr 1fr minmax(100px, 1fr); 列宽不小于100px，不大于1fr
  • auto 关键字表示由浏览器自己决定长度
    • grid-template-columns: 100px auto 100px;
  • 网格线的名称
    • grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    • grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; 指定每一根网格线的名字
• row-gap 属性设置行与行的间隔（行间距）
• column-gap 属性设置列与列的间隔（列间距）
• gap 属性是grid-column-gap和grid-row-gap的合并简写形式 gap: ;
• grid-template-areas 属性用于定义区域
• grid-auto-flow 属性默认值是row，即"先行后列"。设成column，变成"先列后行"。
  • 还可以设成row dense和column dense。row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
• justify-items 属性设置单元格内容的水平位置（左中右） justify-items: start | end | center | stretch;
• align-items属性设置单元格内容的垂直位置（上中下） align-items: start | end | center | stretch;
• place-items属性是align-items属性和justify-items属性的合并简写形式 place-items: ;
• justify-content属性是整个内容区域在容器里面的水平位置（左中右）
  • justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
• align-content属性是整个内容区域的垂直位置（上中下）
  • align-content: start | end | center | stretch | space-around | space-between | space-evenly;
• place-content属性是align-content属性和justify-content属性的合并简写形式 place-content:
• grid-auto-columns属性和grid-auto-rows属性浏览器自动创建的多余网格的列宽和行高
• grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
• grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

项目属性:

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线
  • grid-column-start: 2; grid-column-end: 4; 第二根垂直网格线，第四根垂直网格线
  • 使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格 grid-column-start: span 2;
• grid-column属性是grid-column-start和grid-column-end的合并简写形式 grid-column: 1 / 3;
• grid-row属性是grid-row-start属性和grid-row-end的合并简写形式 grid-row: 1 / 2;
• grid-area 属性指定项目放在哪一个区域 grid-area: e;
  • grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
    • grid-area: / / / ;
• justify-self属性设置单元格内容的水平位置（左中右） justify-self: start | end | center | stretch;
• align-self属性设置单元格内容的垂直位置（上中下） align-self: start | end | center | stretch;
• place-self属性是align-self属性和justify-self属性的合并简写形式 place-self: ;

参考示例

Flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

flex

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性:

• flex-direction属性决定主轴的方向（即项目的排列方向） flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap属性定义，如果一条轴线排不下，如何换行 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap, flex-flow: || ;
• justify-content属性定义了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items属性定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch;
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性:

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto
• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选 flex: none | <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

参考示例

Grid布局，还是Flex布局？

如果你需要使用calc()进行布局，此时你可能需要用到Grid布局。

The biggest difference between Grid and flexbox Shi, Grid enables us to better control of two-dimensional (rows and columns) placed in the project, while flexbox not. Again, this does not mean you should never be used in a grid-dimensional layout.

When we have more than nine but less than 12 project what will happen. Do we want new projects like the example we have seen, only at the beginning of the next line? Or do we want them to behave differently? Maybe if the next line is only one, we want it to take up all available space of the line, such as the following sample A. Or, if you have two projects, then we want them to the center, such as the example B.

to-grid-or-to-flex

And the use of automatic placement grid layout, we will only last item placed on the left side of the cell, assuming that directionthe value of the property is not set rtl(in this case, items placed flow from right to left, the last the items placed in the right side of the grid cells). Flexbox allow the project to bend. This means that we can use flex and alignment properties to control the behavior of these projects combined.

So, whether you choose Grid or flexbox to the above arrangement, in fact, it depends on how you want the grid project - as well as different answers for different situations.

If you are using another issue Grid, you need to consider is the browser support, whether we want to show the layout (IE11 and below) do not support Grid browser. Common query features to meet these conditions.

.grid {
    display: flex;
    flex-wrap: wrap;
    /* Rest of the fallback layout code */
}

@supports (display: grid) {
    .grid {
        display: grid;
        /* Rest of the Grid code */
    }
}

However, if you find yourself spending hours trying to not support Grid browser to copy the exact same layout, so first of all there is not much reason to use Grid. Grid greatness lies in that it can be done Flexbox itself can not do.

Reference article:

• CSS Grid Grid Layout Tutorial
• Flex Layout Tutorial: Grammar
• Flex layout tutorial: Examples of articles
• The simplest form layout Flexbox
• To Grid or to Flex?