Flex 布局

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式 值 描述 row 默认值，主轴沿水平方向从左到右 row-reverse 主轴沿水平方向从右到左 column 主轴沿垂直方向从上到下 column-reverse 主轴沿垂直方向从下到上 initial 将此属性设置为属性的默认值 inherit 从父元素继承此属性的值
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

text-overflow

  <p style="text-overflow: ellipsis;">"Is there any tea on this spaceship?" he asked.</p>

linear-gradient()

  background: linear-gradient(#e66465, #9198e5);

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

grid

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout