共计 2001 个字符，预计需要花费 6 分钟才能阅读完成。
极速上手
| 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. 导航左右各一个
<div class="a">
<div>
新建
</div>
<div>
<span> 查问 </span>
<span> 更多 </span>
</div>
</div>
<style>
.a {
display: flex; // 所有左上角汇合
justify-content: space-between; // div 左右各离开
align-items: center; // 核心轴对齐，让文字能参差一条线
background: #fff;
padding: 10px;
}
</style>
2. 输入框
默认款式！问题是
(1) 输入框和按钮靠不近
(2) 宽度不能 100%
<div>
<input type="text" />
<button type="button"> 搜寻 </button>
</div>第一步：所有左靠齐
<div style="display: flex;">
<input type="text" />
<button type="button"> 搜寻 </button>
</div>第二步：填充一行
<div style="display: flex;">
<input type="text" style="flex-grow: 1;" />
<button type="button"> 搜寻 </button>
</div>第三步：自选上中下还是自适应填充
<div style="display: flex;">
<input type="text" style="flex-grow: 1; align-self: auto;" />
<button type="button"> 搜寻 </button>
</div>商城排列
其实就是横竖横三个一分。
<div class="a">
<div>
<img src="./images/1.jpg">
</div>
<div class="b">
<div>
<img src="./images/2.jpg">
</div>
<div class="c">
<img src="./images/3.jpg">
<img src="./images/4.jpg">
</div>
</div>
</div>
<style>
.a{
width: 615px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.b{
display: flex;
flex-direction: column;
justify-content: inherit;
}
.c{
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>百叶切换
鼠标通过图片，全副显示
创立 a，将 b 全副横过去！
而后 b 设置溢出暗藏，并且退出动画时帧速度为 0.8
这里的图 300 其实是为了自适应高度
<template>
<div class="a">
<div class="b"><img src="1.jpg"></div>
<div class="b"><img src="2.jpg"></div>
<div class="b"><img src="3.jpg"></div>
<div class="b"><img src="4.jpg"></div>
<div class="b"><img src="5.jpg"></div>
</div>
</template>
<style lang="less" scoped="scoped">
.a {
display: flex;
.b {
overflow: hidden;
transition: all 0.8s;
img {width: 300px;}
&:hover {flex:0 0 auto}
}
}
</style>
更多实战
https://flexboxfroggy.com/
小青蛙 ，这个是 B 站找到的。意思就是青蛙用 flex 进行到莲花叶上！
如果记不住就用审查元素而后复制粘贴
我玩了 4 次曾经无敌了
正文完
