Flex布局是一维布局:

Flex: 此属性是以下 CSS 属性的简写：

• flex-grow:该元素获得（伸张）多少正可用空间
• flex-shrink:该元素要消除（收缩）多少负可用空间
• flex-basis:在该元素未伸张和收缩之前，它的大小是多少？
• 以上属性通常用简写属性 flex 表达。下面的代码设置 flex-grow 属性值为 2、flex-shrink 属性值为 1、flex-basis 属性值为 auto。

.item {
  flex: 2 1 auto;
}

语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值，无单位数字：flex-grow */
flex: 2;

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值：flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 2 2;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

可以使用一个，两个或三个值来指定 flex属性。

单值语法: 值必须为以下其中之一：

• 一个无单位数 (<number>) : 它会被当作 flex:<number> 1 0; <flex-shrink>的值被假定为 1，然后<flex-basis> 的值被假定为0。
• 一个有效的 宽度 (width)  值：它会被当作 <flex-basis> 的值。
• 关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 <flex-shrink> 的值。
• 一个有效的宽度值：它会被当作 <flex-basis> 的值。

三值语法：

• 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
• 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
• 第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

取值

• initial

  元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。

• auto

  元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

• none

  元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

  主轴

主轴由 flex-direction 定义，可以取 4 个值：

• row
• row-reverse
• column
• column-reverse

简写属性 flex-flow

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

元素间的对齐和空间分配

align-items属性可以使元素在交叉轴方向对齐,

它的值为：

• stretch项目撑满 flex 容器
• flex-start
• flex-end
• center
• baselineflex 项目的基线对齐

align-self 用于对齐单个 flex 子项

align-self 拥有 align-items 的所有属性值，另外还有一个 auto 能重置自身的值为 align-items 定义的值

justify-content属性用来使元素在主轴方向上对齐

justify-content属性的值：

• stretch
• flex-start
• flex-end
• center
• space-around
• space-between

order 属性

除了颠倒显示弹性项目的顺序之外，您还可以使用order 属性指定单个项目并更改其在视觉顺序中的显示位置。

您还可以按顺序使用负值，这很有用。如果要先显示一个项目，并保持所有其他项目的顺序不变，则可以将该项目的顺序设为-1。由于该值小于 0，因此始终会首先显示该项目。

Gap:10px

正是这个间隔属性的需求，一旦实现，将为我们解决问题。适当的间隙只发生在物件的内边缘。

Grid布局是二维网格布局

网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。

fr 单位

轨道可以使用任何长度单位进行定义。网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的fr单位代表网格容器中可用空间的一等份。下一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

在轨道清单中使用 repeat()

有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：

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

Copy to Clipboard

也可写成：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

两种盒子模型（以宽度为例子）

-   标准盒子模型：margin + border + padding + width，即`width = content`
-   IE盒子模型：margin + width（border + padding + content） ，即 `width = border + padding + content`

修改盒子模型的方法：

• 标准盒子模型：box-sizing:centent-box 【默认值】
• IE盒子模型：box-sizing:border-box

position 的含义是指定位类型，取值类型可以有：

• static: 默认值，就是没有定位
• relative: 相对定位，指的是给元素设置相对于自己原本位置的定位，元素并不脱离文档流
• absolute
• fixed: 一种特殊的绝对定位,固定相对与 body 来定位的
• inherit: 就是继承父元素的 position 属性
• sticky: 是粘性定位，可以说是相对定位 relative 和固定定位 fixed 的结合体，一开始是没有脱离文档流的，但是当元素距离其父元素的距离达到 sticky 粘性定位的要求时 position:sticky 这时的效果相当于 fixed 定位，固定到适当位置，脱离了文档流

display属性值及其作用

属性值	作用
none	元素不显示，并从文档流中移除
block	块类元素
inline	行内元素类型
inline-block	行内块元素
list-item	像块类型一样显示，并添加样式列表标记
table	块级表格
inherit	从父元素继承display属性

 /* CSS 1 */
display: none;
display: inline;
display: block;
display: list-item;
/* CSS 2.1 */
display: inline-block;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
/* CSS 2.1 */
/* CSS 3 */
display: inline-list-item;
display: flex;  /* 将对象作为弹性伸缩盒显示*/
display: box; 
display: inline-flex; /* 将对象作为内联块级弹性伸缩盒显示*/
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* CSS 3 */
/* Experimental values */
display: contents;
display: run-in;
/* Experimental values */
/* Global values */
display: inherit;
display: initial;
display: unset;

sass和 less的区别

一、Sass/Scss、Less是什么?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

二、区别

1、编译环境不一样

Sass的安装需要Ruby环境，是在服务端处理的。 Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2、变量符不一样

SASS 变量符是 $

LESS 变量符是 @

3、变量的作用域也不一样

Less-作用域
@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss-作用域
$color: #00c; /* 蓝色 */

#header {

  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}

#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Sass-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

我们可以看出来，less和scss中的变量会随着作用域的变化而不一样。
复制代码

4、输出设置不同

Sass提供4中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
复制代码

Less没有输出设置

5、支持语句不同

Sass支持条件语句，可以使用if{}else{},for{}循环等等。

/* Sample Sass “if” statement */

@if lightness($color) > 30% {

} @else {

}

/* Sample Sass “for” loop */

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
复制代码

Less不支持。

6、引用外部 CSS 文件

Scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}
复制代码

Less引用外部文件和css中的@import没什么差异。

7、工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。