关于前端:flex弹性盒模型让布局飞起来

定义一个弹性盒子：display:flex;默认程度排列

从左侧进行行排列：flex-direction:row;

从右向左进行排列：flex-direction:row-reverse;

从上到下排列：flex-direction:column;

从下到上排列：flex-direction:column-reverse;

当元素块的宽度大于盒子的宽度，元素块会主动压缩

当退出 flex-wrap:wrap; 时，会折行

同样的，应用 flex-wrap:wrap-reverse; 进行反向折行

能够应用 flex-flow: 进行同时设置
例如：flex-flow:column wrap-reverse等

主轴：justify-content

• 主轴的开始：justify-content:flex-start;
• 主轴的完结对齐：justify-content:flex-end;
• 主轴居中：justify-content:center;
• 均匀散布：justify-content:space-between;(两边对齐)
• 均匀散布：justify-content:space-around;(元素左右两边都有间距)
• 齐全均匀散布：justify-content:space-evenly;(齐全等分)

(要依据排列方向 flex-direction 决定)

穿插轴：align-items

• 穿插轴开始：align-items：flex-start;
• 穿插轴完结：align-items：flex-end;
• 穿插轴居中：align-items:center;
• 拉撑：align-items:stretch;

残余空间平均分配，占一等份：flex-grow:1;
不进行调配：flex-grow:0;

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            display: flex; /* 设置弹性盒子 */
            flex-direction: column;/* 按列进行排列 */
            justify-content: space-between;/* 设置主轴对齐形式 */
        }
        header{
            height: 60px;
            background: blueviolet;
        }
        main{
            flex-grow: 1;/* 将残余空间撑满 */
            background: #cccccc;
        }
        footer{
            height: 60px;
            background: #383881;
        }
    </style>

• 放大：flex-grow:1;
• 放大：flex-shrink:2;
• 基准尺寸：flex-basis:100px;

能够写在一起：flex:1 2 100px;