Flex 布局
练习小游戏Flexbox Froggy - 一个用来学CSS flexbox的游戏
容器 container
子元素 items
flex container 样式
.container{
display:flex/inline-flex //让一个元素变为flex容器（弹性盒） flex 会另起一行 inline-flex不会
控制item的流动方向（主轴）
flex-direction:column
row(默认)从左到右 column：从上到下 row-reverse column-reverse 反之
普通的文档流从左往右排到了最后空间不够会出现折行问题
flex-wrap:wrap //控制是否折行
默认nowrap不折行 一般要求折行wrap,wrap-reverse倒序折行
水平方向的布局（主轴对齐方式）
默认主轴为横轴 除非你用flex-direction改变方向
justify-content：
垂直方向上的布局（次轴对齐）当items高度不同时候用到
align-items:
stretch 在都不固定高度时某个item变高其他的也变高 这个常用 默认stretch
多行内容对齐 行和行之间的空间分配布局
align-content:（基本不用）
}
flex item 属性
控制item排列顺序 按照order从小到大排列 不写默认0
控制item长胖：把多余的空间按比例分配，如果不写 默认0 仅包住里面的内容，数字就是比例
控制变瘦 flex-shrink，原始宽度被压缩时，且nowrap，谁瘦的多 谁瘦的少
可以写flex-shrink：0防止变瘦（我不想变瘦） 默认是1（大家一起瘦）数字越大瘦的越多
flex-basis 控制基准宽度 默认是auto和宽度一样宽（可以先理解为和width基本一样）
以上三个属性简写: 建议分开写
flex：1（flex-grow）1(flex-shrink) 100px(flex-basis)
控制单个元素align-self。这个属性接受和align-items一样的那些值。
一般只会用以下几个：
display:flex
flex-direction:row/column
flex-wrap:wrap
just-content:center/space-between
aling-items:center
经验：
AB 变为下面的
A B
可以在父元素加just-content:space-between
也可以在B元素加margin-left:auto 推荐
非必要不写死宽高 ：min/max-width/height 内容就是响应式的 PC可以写死
不写死案例：
width:50%
max-width:100px
width:30vw
min:width:50%
草图工具：figma
Grid布局 （二维布局用gird）
也分container 和items
Grid Garden - 一个用来学CSS grid的游戏 (cssgridgarden.com)
container
如何成为container: displayl:grid/inline-grid
行和列
列：grid-template-columns:40px 50px auto 50px 40px
行：grid-template-rows:25% 100px auto
每根线用数字表示 线还可以取名字 就默认数字就好
横线有1234竖线有123456
他的子元素可以指定从第几条线开始到第几条线结束
.item{
grid-column-start:2
grid-column-edd:4
grid-row-start:2
grid-row-edd:4
}
行列用fr-freespace 份
.container{
grid-template-columns:1fr 1fr 1fr 三列
grid-template-rows:1fr 1fr 两行
}
item写后就会平均布局到上面分好的地方
也可以指定线
gird-gap:每个格子之间的空隙是多少
用份平均布局后 需要指定间隙是多少
grid-gap:10px 总空隙
grid-column-gap：10px 水平方向
grid-row-gap：10px 垂直方向
分区 grid-template-areas
就是你自己把container 分为多少块 然后指定宽高
如让header 占了上面三块
可以设置gap
grid适合不规则布局
gird 属性太多其余可以看文档，用到再说。
