grid和flex常用属性, 五角星

flex

flex 有主轴（main axis）和交叉轴（cross axis）的概念

1. flex-direction => row | row-reverse | column | column-reverse 决定主轴的方向（即项目的排列方向）
2. flex-wrap => nowrap | wrap | wrap-reverse 一条轴线排不下，如何换行
3. flex-flow => 上面二者的简写形式，默认值为row nowrap
4. justify-content => flex-start | flex-end | center | space-between | space-around 项目在主轴上的对齐方式
5. align-items => flex-start | flex-end | center | baseline | stretch 项目在交叉轴上如何对齐
6. align-content => flex-start | flex-end | center | space-between | space-around | stretch多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

grid

1. grid-template-columns
   => 横向排布, 超出换行
   =>repeat(次, 份)
   =>次表示循环次数, 份表示每块占几份
   =>不设置份数默认占满整行
   =>repeat(3 , 1fr 2fr) 表示重复三次1:2的容器

2. grid-template-rows
   => 同上, 只是设置的是行

五角星画法

三个钝角三角形拼接