关于css3: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.导航左右各一个

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

极速上手

实战

商城排列

百叶切换

更多实战