flex布局小总结

问题：在哪里可以使用flex布局？

任何一个容器都可以使用Flex布局,但是需要注意版本的兼容性
容器可以理解为是项目的父元素。项目可以是块级元素，也可以是行内元素

容器和项目六大属性：

我们可以用容器属性控制项目的：方向、轴线转折方向、主轴对齐方式、交叉轴对齐方式、多根轴对齐方式
用项目属性控制：排列顺序、放大比例、缩小比例、默认项目本身大小、单个项目的对齐方式

需要注意

兼容性：对安卓、ios兼容性
属性冲突：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器：
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目：
order: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; flex
align-self: auto | flex-start | flex-end | center | baseline |
stretch;

主轴，交叉轴的理解：

案例：

主体布局-上中下布局
布局模式：上中下布局（上下不固定），优点：当main主体部分的高度无法达到整个页面高度时，使用flex：1；（为了以防万一建议加上）可以将主体部分撑开，使footer在网页的最下方 需要注意的是必须给body和html两个元素height:100%;没有高度交叉轴对齐方式无法生效

 html:
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>

css:
    html{
        height: 100%;
    }
    body{
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    header,footer{
        background: #19b5ff
    }
    main{
        flex:1;
    }

主体布局2
布局模式：上中下布局（上下固定中间滚动）

    <header>header</header>
    <main>
        input*100
    </main>
    <footer>footer</footer>

css:
    html{
        height: 100%;
    }
    body{
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    header,footer{
        background: #19b5ff;
    }
    main{
        flex:1;
        overflow-y: scroll;
    }

主体布局3
布局模式：上中（左右）下，一列定宽，一列自适应。还有两列定宽，中间自适应的基本原理相同。实际上表单也是一侧或两侧固定中间自适应的体现） 如果不想要定宽那么就是flex:auto;项目默认项目本身大小。（pc端常用）

    <header>header</header>
    <main>
        <section>section</section>
        <aside>aside</aside>
    </main>
    <footer>footer</footer>

css:
    html{
        height: 100%;
    }
    body{
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    header,footer{
        background: #19b5ff;
    }
    main{
        flex:1;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    section{
        flex:1;
        background: #8d44ad;
    }
    aside{
        flex:0 0 12px;
        background: #f7ca17;
    }

实例1
表单的应用

    <div class="demo-input">
        <span>图标</span>
        <input type="text" placeholder="请输入您的答案">
        <button>提交</button>
   </div>

css:
    .demo-input{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        background: #ffffff;
        border:1px solid #1cbb9b;
        border-radius: 1px;
    }
    input{
        flex:1;
        border:none;
    }
    span,button{
        color: #fff;
        background:#1cbb9b;
        border:none;
    }
    input,button,span{
        padding:4px 12px;
    }

实例2
图文横向对齐：中心轴对齐不需要调间距

     <div class="demo-img-txt">
        <div class="img">
            <img src="images/1.jpg" alt="">
        </div>
        <div class="txt">
            <span>span</span>
            <span>span</span>
            <a href="#">a</a>
        </div>
    </div>

css:
    .demo-img-txt{
        width: 60%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        padding:2vh 2vw;
        border:1px solid #203141;
    }
    .demo-img-txt .img{
        width: 40%;
    }
    .demo-img-txt .txt{
        width: 50%;
        display: flex;
        flex-flow: column nowrap;
    }

我自己遇到的坑：当内容个数不确定时，尤其个数为奇数时不能使用justify-content: space-around来设置元素边距。 应该手动设置元素边距

     <div class="box-all">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>

css:
    .box-all{
        width: 40%;
        height:40vh;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        align-items: center;
        border:1px solid #203141;
    }
    .box{
        width: 40%;
        height:8vh;
        background: #039976;
    }

未完待续。。。