xyxsw's blog

float：最初是用来实现文字围绕图片效果，被巧妙用作布局清除浮动：

clear 属性 + div 隔墙（或者伪元素）
bfc

flex（弹性布局，创建弹性格式化上下文 FFC）：

容器属性：

flex-direction 属性决定主轴的方向；
flex-wrap 属性定义，如果一条轴线排不下，如何换行；
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap；
justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在交叉轴上如何对齐。
align-content 属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。

子元素属性：

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

grid（网格布局，创建网格格式化上下文 GFC）：

作用于父元素:

display: grid \ inline-grid
用来生成显式的列、行：grid-template-colums/rows: 数值 / 百分比 /fr/repeat () 等

规定区域 (area) 的分布：grid-tempate-areas:

  		"header header"
  		
  		"sidebar content"
  		
  		"footer footer";

规定默认的排序方向：grid-auto-flow: row (dense) I column (dense)

作用于子元素：

规定占用的列、行：grid-colum/row: <start-line> / <end-line>
规定占用的 area：grid-area: header

容器指定了网格布局以后，接着就要划分行和列。 grid-template-columns 属性定义每一列的列宽， grid-template-rows 属性定义每一行的行高。

css

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat() 接受两个参数，第一个参数是重复的次数（上例是 3），第二个参数是所要重复的值。

如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。

除了 auto-fill，还有一个关键字 auto-fit，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill 会用空格子填满剩余宽度，auto-fit 则会尽量扩大单元格的宽度。

css

repeat(auto-fill, 100px)

为了方便表示比例关系，网格布局提供了 fr 关键字（fraction 的缩写，意为 "片段"）。如果两列的宽度分别为 1fr 和 2fr ，就表示后者是前者的两倍。

css

.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

表示两个相同宽度的列。

css

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

第一列的宽度为 150 像素，第二列的宽度是第三列的一半 75。

minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

css

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

grid-row-gap 属性设置行与行的间隔（行间距）， grid-column-gap 属性设置列与列的间隔（列间距）。

css

.container {
  grid-gap: 20px 20px;
}

顺序由 grid-auto-flow 属性决定，默认值是 row ，即 "先行后列"。也可以将它设成 column ，变成 "先列后行"。

css

grid-auto-flow: column dense;

dense 意思是尽量填满