11月25日笔记

flex布局

参考这篇文章，复习 flex 布局。

• 为块级元素设置 display: flex;（保持块级特性） 或者为内联元素设置 display: inline-flex（保持行内特性） 即可创建 flex 布局

作用于父级元素上的属性

• flex-direction 设置主轴方向，默认值 row，即按照文档流的方式从左往右排列。可选属性值：row-reverse 按照文档流的方式从右往左排列；column 从上到下垂直方向排列； column-reverse 从下到上垂直排列。

• flex-wrap 设置子元素是否换行显示。默认值 nowrap, 不换行。可选属性：wrap 当父元素宽度不够时换行; wrap-reverse 父元素宽度不够时换行，但是是从下往上换行。

• flex-flow 是 flex-direction 和 flex-wrap的缩写。写法：

  flex-flow: <‘flex-direction’> || <‘flex-wrap’>
  

• justify-content 设置水平方向上的子元素的对齐方式（单行）。默认值为 flex-start 与文档流方向相关，左对齐。可选属性：felx-end 右对齐；center：居中对齐。space-between 两端对齐，多余的间距只在中间元素区域平分；space-around 每个子元素两侧都环绕互不干扰的等宽的空白间距；space-evenly 每个子元素两侧空白间距完全相等。

• align-items 设置垂直方向上的子元素对齐方式。默认值为 stretch 子项拉伸高度，如果设置了高度则按照高度渲染。可选属性值：flex-start 与文档流方向有关，默认为容器顶部对齐；flex-end 底部对齐；center 垂直居中对齐；baseline 相对于flex容器的基线对齐。

• align-content 设置垂直方向上子元素的对齐方式（多行）。默认值 stretch 每一行flex子元素都等比例拉伸。可选参数：flex-start 顶部对齐；flex-end 底部对齐；center 整体垂直居中；space-between 上下两行两端对齐，剩下每一行元素等分剩余空间；space-around 每一行元素上下都有独立且不重叠的空白间距；space-evenly 每一行元素都上下等分。

作用在子元素上的属性

• order 设置某一个 flex 子项的排列位置。默认值 0。如果不设置就按照本身的排列顺序；如果越大的越往后排列，越小的越往前排列。可以设置负数。

• flex-grow 扩展子元素所占的空间，扩展所占的空间是出去元素外的剩余的空白间隙，不支持负值。所有的剩余空间总量是1,如果只有一个 flex 子项设置了 flex-grow 且值小于1，那么扩展的空间就是与剩余空间的比例；如果大于1，则占据所有的剩余空间。如果多个子项设置了 flex-grow 且和小于1 则按照比例计算，如果和大于1，则按各个子项所占据的比例计算。

• flex-shrink 当空间不足的时候，单个元素的收缩比例，不支持负值，与 flex 相似。

• flex-basis 定义元素渲染的大小，默认值为 auto。如果有 width 则占据的大小就是 width，没有设置就按照内容宽度来。如果同时设置了width 和 flex-basis 会忽略 width 。

• flex 是flex-grow，flex-shrink和flex-basis的缩写。默认值为 0 1 auto

  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  

• align-item 单独控制某一个 flex 子元素的垂直对齐方式，用法类似与 align-items。默认值 auto 是指继承父元素中的 align-items 的属性值。

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  

可选链 ?.

可选链用于深层次访问对象中的属性是否存在。如果我们要判断一个对象中的某个对象的某个属性是否存在时，为了安全起见，需要提前判断这个对象中的某个对象是否存在，然后再判断这个对象的某个属性是否存在。

let person = {
    tom: {
        age: 21,
        address: 'london'
    }
}

// 获取person中tom的age。person中不一定存在tom这个对象
// 如果存在tom这个对象，才去访问tom的age
let age = person.tom && person.tom.age

// 使用可选链
// 如果tom不存在，则会直接返回undefined，如果存在则会取到tom的age
let age1 = person.tom?.age

注意：可选链不能用于赋值操作

let obj = {}
obj?.name = 'tom' // Uncaught SyntaxError: Invalid left-hand side in assignment

其他内容

• let 和const 关键字
• 变量的解构赋值
• 字符串的新增方法
• Symbol 数据类型
• 遍历器和 for...of 的用法，for...of 用于循环具备 iterator 接口的数据如：数组、字符串、arguments 对象、DOM nodelist对象，Generator对象
• 弹出框案例

明天计划

• promise 对象复习
• async 函数
• class 相关
• set 和 map 数据结构
• 其他任务