flex布局的常用方法

单行的时候文本不足会居中，多行会自动折行居左

display: flex;
flex-direction: row;
justify-content: center;

页面高度不足时，在底部显示；页面高度超出时，随页面滚动

display: flex;
flex-direction: column;
justify-content: space-between;

flex的子元素分布比例

flex属性的默认值为：0 1 auto（不放大会缩小）三个参数：flex-grow、flex-shrink、flex-basis
flex-grow：定义子元素的放大比例
flex-basis：定义元素的基础宽度,覆盖width
flex-shrink：定义子元素的缩小比例

一种是子元素的宽是相同的.即flex:1
三个子元素宽是不同的.即flex设置为不同的比例
有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例

<style>
        .flex {
            display: flex;
        }
        .flex div {
            height: 200px;
            background:rebeccapurple;
            margin: 10px;
            flex: 1;/* 一种是子元素的宽是相同的.即flex:1 */
        }
        .flex1 {
            display: flex;
        }
        .flex1 div {
            height: 200px;
            background: goldenrod;
            margin: 10px;
        }
        .flex1 .right,.left {
            flex: 1;/* 三个子元素宽是不同的.即flex设置为不同的比例 */
        }
        .flex1 .center {
            flex: 4;/* 三个子元素宽是不同的.即flex设置为不同的比例 */
        }
        .flex2 {
            display: flex;
        }
        .flex2 div {
            height: 200px;
            background: green;
            margin: 10px;
        }
        .flex2 .right {
            flex: 200px;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
        }
        .flex2 .center {
            flex: 5;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
        }
        .flex2 .left {
            flex: 1;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
        }
        .font{
            color: aliceblue;
            text-align: center;
            line-height: 200px;
        }
    </style>
 <div class="flex">
        <div class="right font">一种是子元素的宽是相同的.即flex:1</div>
        <div class="center font">flex: 1;</div>
        <div class="left font">flex: 1;</div>
    </div>
    <div class="flex1">
        <div class="right font">flex: 1;</div>
        <div class="center font">flex: 4;三个子元素宽是不同的.即flex设置为不同的比例</div>
        <div class="left font">flex: 1;</div>
    </div>
    <div class="flex2">
        <div class="right font">flex: 200px;</div>
        <div class="center font">flex: 5;有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例</div>
        <div class="left font">flex: 1;</div>
    </div>

flex.png

实例html：

<title>内容不足时页脚在底部</title>
    <style>
            html,body{
                height: 100%;
            }
            .page{
                /* flex方法 */
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                /* 定位方法 */
            }
            .mian{
                background-color: blueviolet;
            }
            .liner{
                display: flex;
                flex-direction: row;
                justify-content: center;
            }
            .footer{
                width: 100%;
                background-color: green;
            }
    </style>
 <div class="page">
        <div class="mian">
            页面内容
            <div class="liner">
                单行文本居中，多行文本居左显示
            </div>
        </div>
        <div class="footer">
            页面高度不足时，在底部显示；页面高度超出时，随页面滚动footer
        </div>
    </div>

多行.png
单行.png

需要注意的是任何容器都可以指定为flex布局，但是在flex布局中float、clear、vertical-align都会失效。

主轴方向

flex容器分为x轴与y轴，x轴正方向默认从左至右，y轴正方向默认从上到下。
定义一个容器为弹性布局display:flex;主轴默认方向为左到右；
如果想去改变flex的默认方向，就需要用到flex-direction属性
flex-direction有四个属性值，分别是row、row-reverse、column、column-reverse，分别为从左到右、从右到左、从上到下、从下到上
父元素身上的属性:
主轴方向的对齐方式

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

纵向单行对齐方式

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

子项目换行

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

纵向多行对齐方式

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

子项目的一些属性:

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值
flex:flex-grow flex-shrink flex-basis