小程序 flex 布局框架（源码分享）

源码摘自小编的原创文章《小程序全局样式(app.wxss 源码分享)》，
文章链接：https://blog.csdn.net/u013350495/article/details/93141910

在线示例：http://www.jq22.com/jquery-info19340

/* 列式弹性盒子 */
.flex_col {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
/* 行式弹性盒子 */
.flex_row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

/* 弹性盒子弹性容器 */
.flex_col .flex_grow{width:0;flex-grow: 1;}
.flex_row .flex_grow{flex-grow: 1;}

/* 弹性盒子允许换行 */
.flex_col.flex_wrap{flex-wrap: wrap;}

/* 弹性盒子居中对齐 */
.flex_col.flex_center,.flex_row.flex_center{justify-content: center;}

/* 列式弹性盒子两端对齐 */
.flex_col.flex_space{justify-content: space-between;}

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号