这是我参与「第五届青训营」伴学笔记创作活动的第 8 天。

Flexibility

可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

flex-grow

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

flex-shrink

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

flex

flex：1 => flex-grow:1

flex:100px => flex-basis:100px

flex: 2 1 => flex-grow: 2; flex-shrink: 1

flex: 1 100px => flex-grow: 1; flex-basis: 100px

flex: 2 0 100px => flex-grow: 2; flex- shrink: 0; flex-basis: 100px

flex: auto => flex: 1 1 auto

flex: none => flex: 0 0 auto

Grid布局

display：grid

display: grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列

划分网格

grid-template-columns：每列宽度 grid-template-rows：每行高度

grid line网格线

grid area 网格区域

float浮动

浮动标签可以使内容浮动在页面表面，例如文字围绕图片效果等

position属性

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位

position：relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、 left、 bottom、 right设置偏移长度
流内其它元素当它没有偏移一样布局

position：absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

学习css的建议

充分利用MDN和W3C CSS规范
保持好奇心，善用览器的开发者工具
持续学习，CSS新特性还在不断出现

第二课 理解CSS之深入CSS 3 | 青训营笔记