极速上手

image.png

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

image.png

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

实战

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

1.导航左右各一个
image.png

    <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%
image.png

    <div>
        <input type="text" />
        <button type="button">搜索</button>
    </div>
第一步:所有左靠齐
image.png
    <div style="display: flex;">
        <input type="text" />
        <button type="button">搜索</button>
    </div>

第二步:填充一行
image.png
    <div style="display: flex;">
        <input type="text" style="flex-grow: 1;" />
        <button type="button">搜索</button>
    </div>

第三步:自选上中下还是自适应填充
image.png
    <div style="display: flex;">
        <input type="text" style="flex-grow: 1; align-self: auto;" />
        <button type="button">搜索</button>
    </div>

商城排列

其实就是横竖横三个一分。
image.png

<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的简写
image.png

<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>

image.png

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次已经无敌了


赵不悔
96 声望4 粉丝

我以为租来的人生也能幸福…要不是幸福终究有个期限,我也就信了。