这是我参与「第四届青训营」笔记创作活动的第1天，笔记内容主要是关于css布局的内容,有弹性盒布局(flex布局)，网格布局。

弹性盒布局

Flexbox可以控制的弹性项有下面四方面
- 大小，基于内容以及可用空间。
- 流动方向，水平或者垂直，正向还是反向。
- 两个周项上的对齐和分布。
- 顺序。
主轴和辅轴
- 默认情况下水平方向为主轴，而与主轴方向垂直的方向称为辅轴
- 可以通过flex-direction来修改主轴的方向
  - flex-direction:row; 即横向为主轴
  - flex-direction:column; 即纵向为主轴
对齐
- 对于主轴而言，使用justfy-content。
- 其中space-around时将多余的空间等分后，分别放到每一项的两侧。
- 而对于辅轴而言，使用align-items来调整元素辅轴的位置。其中有align-items:flex-start, align-items:center,align-items:flex-end.
可以伸缩的尺寸
- 相关属性有flex-basis, flex-grow, flex-shrink
  - flex-basis是用来控制控制项目在主轴方向上，经过修正的大小。
  - flex-grow则是用来处理剩余空间的。
  - flex-shrink则是在空间不足是来处理元素大小的。

网格布局

相关概念
- display: grid设置网格容器。
- 该容器将会被网格线划分成网格单元。
- 由相邻网格单元组合起来的矩阵区域叫网格区。

定义网格

.wrapper{
 display: grid;
 grid-template-rows: 300px 300px;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 background-color: aqua;
}

上面的代码创建了一个2行4列的网格，行高300px,4列等宽

如果想要添加网格项则使用

.wrapper{
 grid-row-start: 1;
 grid-column-start: 1;
 grid-row-end: 4;
 grid-column-end: 2;
}
//其中grid-row-start: 1;表示横向的第一个网格线，其他同理

该代码等同于
 .wrapper{
 grid-row:1/4;
 grid-column:1/2;
}

总结

通过本次青训营的css学习，进一步加深了对css作用的理解，同时课下我也去学习了更多关于页面布局方面的知识。希望在之后的学习中，能够学习到更多有趣的知识，让代码能达到相同效果的同时也更加简便。

css布局的学习 | 青训营笔记

弹性盒布局

网格布局

总结