flexbox 伸缩布局盒模型

核心概念

盒模型

主轴：打横的

侧轴：打竖的

伸缩容器 ：父级元素

伸缩项目：子级元素

div包住p. div是伸缩容器，p就是伸缩项目

div
 p
//div包住p. div是容器，p就是项目

属性

1. adjust-content：水平线上布局项目的方式
2. align-items：垂直方向上布局项目的方式
3. flex-direction: 多个项目排列方向！方向！，子项换向首选
4. flex-warp：是否换行，这个属性好有意思
5. 3-4组合成 flex-flow
6. align-content 项目多行间距 与1同属性，当布局不复杂的时候，设置center就能垂直居中
7. align-self 同1属性 ，多项目里面的1个的针对性操作
8. order

属性值

可以说是调整子项之间的间隔

flex-start

center

flex-end

space-between （两边尽顶）

space-around（相比上面，靠近一点）

可以说是调整子项之间的排列方向，顺序

row

row-reverse

column 会使1-2作用互换

column-reverse

关键点

当使用flex-direction:column /column-reverse 之后 align-items（侧轴）和 adjust-content(主轴) 的属性互换；

注意设定伸缩容器的固定宽和高，待验证，但是觉得是必须的。

⚠️上述是基本的flex的基本用法，但我觉得经以足够，和应付大部分的响应式布局。特别是页面不复杂的时候。对于web开发，或者说一些知识并说是基础的时候，说明它非常重要，失去它将无法开展工作。不要因为不难，或者说没什么技术含量，就觉得自己会很快掌握。你看，没有地基，房子是建不起来的。

有个网址挺好的，因为断网了，迟下再补充。