flex布局快速上手

极速上手

flex-direction	整体方向，横着还是竖着。默认横着左上角
flex-wrap	flex-direction横着太多，需要换行吗？
align-items	单轴横着一排顶上，顶下还是横排文字矫正
align-content	多轴顶上还是顶下
justify-content	帮flex-direction决定聚合还是平铺
justify-items	用了也没用，他是grid网格布局用的
flex-flow	组合的flex-direction和flex-wrap

---

order	-1 0 1 决定了你单独的li谁往前谁往后
flex-grow	所有.a > li批量用它，自适应一行。只用一个那就一行自适应
flex-basis	其实就是li最小宽度
flex-shrink	缩小比例
flex	flex-grow, flex-shrink 和 flex-basis简写
align-self	相当于单独版的align-items

---

实战

与其挨个讲不如直接实战，每个东西怎么玩

1.导航左右各一个

    

        

            新建
        

        

            查询
            更多
        
    

    

---

2.输入框
默认样式！问题是
(1)输入框和按钮靠不近
(2)宽度不能100%

    

        
        搜索
    

第一步：所有左靠齐

    

        
        搜索
    

---

第二步：填充一行

    

        
        搜索
    

---

第三步：自选上中下还是自适应填充

    

        
        搜索
    

---

商城排列

其实就是横竖横三个一分。

---

百叶切换

鼠标经过图片，全部显示
创建a，将b全部横过来！
然后b设置溢出隐藏，并且加入动画时帧速度为0.8
这里的图300其实是为了自适应高度

---

更多实战

https://flexboxfroggy.com/
小青蛙，这个是B站找到的。意思就是青蛙用flex进行到莲花叶上！
如果记不住就用审查元素然后复制粘贴
我玩了4次已经无敌了