关于css3:flex布局快速上手

3次阅读

共计 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 次曾经无敌了

正文完