极速上手
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其实是为了自适应高度
flex属性是flex-grow, flex-shrink 和 flex-basis的简写
<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>
ul {
width: 100%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap; //自适应换行
li {
flex-grow: 1; //自动补位
flex-basis: 200px; //普通盒子200,如果缺就上面补位
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
}
更多实战
https://flexboxfroggy.com/
小青蛙,这个是B站找到的。意思就是青蛙用flex进行到莲花叶上!
如果记不住就用审查元素然后复制粘贴
我玩了4次已经无敌了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。