app-form-view 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-form-view",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "vue表单组件库",
   "main": "dist/index.js",
   "publishConfig": {
@@ -24,6 +24,7 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-alias": "^4.0.2",
     "@rollup/plugin-babel": "^6.0.3",
@@ -35,20 +36,21 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.5.0",
     "body-parser": "^1.20.2",
     "express": "^4.18.2",
     "glob": "^8.1.0",
     "http-proxy-middleware": "^3.0.5",
     "node-sass": "^6.0.1",
+    "postcss": "^8.5.15",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-vue2": "^0.8.1",
-    "sass": "^1.100.0",
+    "sass": "^1.101.0",
     "sass-loader": "^7.0.3",
     "uglify-es": "^3.3.9",
     "vuepress": "^1.9.8",
@@ -62,7 +64,7 @@
     "js-beautify": "^1.15.4",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "rollup-plugin-scss": "^4.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "vant": "^2.12.14",
     "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14",

package/scripts/rollup.config.base.js

@@ -3,81 +3,113 @@ import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import copy from 'rollup-plugin-copy';
 import json from '@rollup/plugin-json'
-import scss from "rollup-plugin-scss"
 import alias from '@rollup/plugin-alias'
 import vue from 'rollup-plugin-vue2'
 import image from '@rollup/plugin-image'
 import replace from '@rollup/plugin-replace'
+// 新增postcss，移除scss导入
+import postcss from "rollup-plugin-postcss"
 const path = require('path')
 
 const customResolver = resolve({
   extensions: ['.mjs', '.js', '.jsx', '.json', '.sass', '.scss']
 });
 
-export default {
-  input: "src/index.js",
-  //external: ['vue'],
-  plugins: [
-    alias({
-      entries: [
-        { find: '@', replacement: path.resolve(__dirname, '../src') },
-      ],
-      customResolver
-    }),
-    replace({
-      // 关键：必须用 JSON.stringify 包裹，且值为 process.env.NODE_ENV（从命令行传递）
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      preventAssignment: true,
-    }),
-    vue({
-      // 解析 template 模板
-      template: {
-        compiler: require('vue-template-compiler'), // 显式指定编译器
-        compilerOptions: {
-          preserveWhitespace: false
-        }
-      },
-      //css: true, // 👈 改成 true
-      // 处理样式（交给 postcss）
-      css: false
-    }),
-    scss({
-      fileName: "css/style.css",
-      failOnError: true,
-      sourceMap: false,
-    }),
-    resolve({
-      extensions: ['.js', '.vue', '.json'],
-      preferBuiltins: false
-    }),
-    commonjs({
-      include: "node_modules/**",
-    }),
-    babel({
-      exclude: 'node_modules/**',
-      extensions: ['.js', '.vue', '.jsx'], // 明确支持的文件类型
-      babelHelpers: 'bundled',
-      presets: [
-        ['@babel/preset-env', {
-          targets: 'last 2 versions, > 1%, not dead'
-        }]
-      ],
-      plugins: [
-        '@babel/plugin-syntax-jsx',
-        '@vue/babel-plugin-transform-vue-jsx'
-      ]
-    }),
-    json(),
-    image(),
-    copy({
-      targets: [
-        {
-          src: 'node_modules/element-ui/lib/theme-chalk/fonts/*', // 源文件路径（Element UI 的字体文件）
-          dest: 'dist/fonts' // 目标路径（复制到 dist/fonts 目录下）
-        }
-      ],
-      // 可选：如果目标目录已存在，覆盖旧文件
-      overwrite: true
-    })
-  ]
-};
+/**
+ * 工厂生成基础配置
+ * @param {string} cssOutputName css输出完整路径/文件名
+ * @returns Rollup基础配置
+ */
+function createBaseConfig(cssOutputName = "form-design.css") {
+  return {
+    input: "src/index.js",
+    external: ['vue', 'vuex', 'element-ui', 'vant'],
+    output: {
+      globals: {
+        vue: 'Vue',
+        vuex: 'Vuex',
+        'element-ui': 'ELEMENT',
+        vant: 'vant'
+      }
+    },
+    plugins: [
+      alias({
+        entries: [
+          { find: '@', replacement: path.resolve(__dirname, '../src') },
+        ],
+        customResolver
+      }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        preventAssignment: true,
+      }),
+      vue({
+        template: {
+          compiler: require('vue-template-compiler'),
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        },
+        css: false,
+        scoped: true
+      }),
+      // 替换原来的 scss 插件
+      postcss({
+        extract: cssOutputName,
+        use: ["sass"], // 解析 lang="scss"
+        plugins: [
+          require("autoprefixer")()
+        ],
+        sourceMap: false
+      }),
+      resolve({
+        extensions: ['.js', '.vue', '.json'],
+        preferBuiltins: false
+      }),
+      commonjs({
+        include: "node_modules/**",
+      }),
+      babel({
+        exclude: 'node_modules/**',
+        extensions: ['.js', '.vue', '.jsx'],
+        babelHelpers: 'bundled',
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                ie: 11,
+                chrome: 49,
+                safari: 10
+              },
+              modules: false,
+              useBuiltIns: false
+            }
+          ]
+        ],
+        plugins: [
+          '@babel/plugin-syntax-jsx',
+          '@vue/babel-plugin-transform-vue-jsx',
+          '@babel/plugin-proposal-optional-chaining'
+        ]
+      }),
+      json(),
+      image(),
+      copy({
+        targets: [
+          {
+            src: 'node_modules/element-ui/lib/theme-chalk/fonts/*',
+            dest: 'dist/fonts'
+          }
+        ],
+        overwrite: true
+      })
+    ],
+    onwarn(warning, warn) {
+      if (warning.code === 'CIRCULAR_DEPENDENCY') return
+      if (warning.message.includes('stream')) return
+      warn(warning)
+    }
+  }
+}
+export default createBaseConfig;

package/scripts/rollup.config.build.js

@@ -1,54 +1,57 @@
-
-import replace from '@rollup/plugin-replace';
 import path from "path";
 const glob = require("glob")
 const list = {};
-async function makeList(dirpath, list) {
+
+function makeList(dirpath, list) {
   const files = glob.sync(dirpath + '/**/app-index.js')
   for (let file of files) {
     const component = 'index'
     list[component] = file
   }
-
 }
 makeList('src', list)
+
 import filesize from "rollup-plugin-filesize";
 import terser from '@rollup/plugin-terser';
-import baseConfig from "./rollup.config.base.js";
+import createBaseConfig from "./rollup.config.base.js";
 import { name, version } from "../package.json";
-// banner
+
 const banner =
-  `${"/*!\n" + " * "}${name}.js v${version}\n` +
-  " * Released under the MIT License.\n" +
-  " */";
-const external = ['vue', 'element-ui', 'util', 'vant', 'vuex'];
+  `/*!
+ * ${name}.js v${version}
+ * Released under the MIT License.
+ */`;
+
+const external = ['vue', 'element-ui', 'vant', 'vuex'];
 const globals = {
   'vuex': 'Vuex',
   'vue': 'Vue',
   'vant': 'vant',
-  'element-ui': 'ELEMENT',
-  'util': 'util'
+  'element-ui': 'ELEMENT'
 };
-// 支持输出 []
-baseConfig.input = list
+
+// 调用工厂函数，指定css输出路径，不要手动改base原始对象
+const baseConfig = createBaseConfig("css/style.css");
+baseConfig.input = 'src/app-index.js'
+
 export default [
-  // .js, .cjs.js, .esm.js
   {
     ...baseConfig,
     external,
-    output: [
-      // umd development version with sourcemap
-      {
-        dir: `dist`,
-        name,
-        banner,
-        assetFileNames: 'style.css',
-        format: 'umd',
-        globals
-      },
-
+    output: {
+      file: "dist/index.js",
+      name,
+      banner,
+      format: 'umd',
+      globals
+    },
+    // 重点：删掉外层的 scss 实例，只追加压缩插件
+    plugins: [
+      ...baseConfig.plugins,
+      terser({
+        format: { comments: 'all' }
+      }),
+      filesize()
     ],
-    plugins: [...baseConfig.plugins, terser(), filesize()],
   }
-];
-
+];

package/scripts/rollup.config.dev.js

@@ -1,32 +1,29 @@
 import livereload from "rollup-plugin-livereload";
-import baseConfig from "./rollup.config.base.js";
+import createBaseConfig from "./rollup.config.base.js";
 import { name } from "../package.json";
 import express from 'express';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import replace from '@rollup/plugin-replace';
 const glob = require("glob");
 const list = {};
 
-// 修复1：正确提取组件路径+修复模板字符串语法错误
-async function makeList(dirpath, list) {
+// 移除无用 async
+function makeList(dirpath, list) {
   const files = glob.sync(dirpath + '/**/index.js');
   for (let file of files) {
-    // 提取组件路径（如 src/components/button/index.js → button）
     const component = file.split(/[/.]/).slice(-3, -1).join('/');
-    list[component] = file; // 移除多余的 ${}，避免字符串拼接错误
+    list[component] = file;
   }
 }
 makeList('src/components/', list);
 
-// 启动 Express 服务器
+// 启动 Express 开发服务
 const app = express();
-const localIP = 'localhost'; // 固定本地IP（已替换）
-const proxyTarget = `http://${localIP}:8088`; // 代理目标IP
+const localIP = 'localhost';
+const proxyTarget = `http://${localIP}:8082`;
 
-// 静态文件服务
 app.use(express.static('.'));
 
-// 代理中间件（目标已改为固定IP）
+// API 代理
 app.use('/api', createProxyMiddleware({
   target: proxyTarget,
   changeOrigin: true,
@@ -39,15 +36,17 @@ app.use('/api', createProxyMiddleware({
   }
 }));
 
-// 修复2：控制台日志显示正确的IP地址（而非localhost）
 app.listen(8006, localIP, () => {
-  console.log(`🚀 开发服务器已启动: http://${localIP}:8006`); // 显示IP访问地址
-  console.log(`🔀 代理配置: /api/* -> ${proxyTarget}/api/*`); // 显示正确代理目标
+  console.log(`🚀 开发服务器已启动: http://${localIP}:8006`);
+  console.log(`🔀 代理配置: /api/* -> ${proxyTarget}/api/*`);
 });
 
+// 1. 通过工厂生成全新独立配置，指定开发环境CSS输出路径
+const devBase = createBaseConfig();
+
 export default [
   {
-    ...baseConfig,
+    ...devBase,
     output: [
       {
         file: `dist/${name}.js`,
@@ -56,15 +55,13 @@ export default [
       },
     ],
     plugins: [
-      ...baseConfig.plugins,
-      replace({  // 新增插件
-        __API_PROXY_TARGET__: JSON.stringify(proxyTarget),
-        preventAssignment: true
-      }),
+      ...devBase.plugins,
+      // 删除外层 scss、删除外层重复 replace！base 已内置
+      // 仅追加开发专属热更新插件
       livereload({
         watch: '.',
         port: 35729,
-        host: localIP // 修复3：livereload绑定本地IP，避免局域网热更新失效
+        host: localIP
       })
     ],
   },

package/scripts/rollup.config.prod.js

@@ -3,7 +3,7 @@ import terser from "@rollup/plugin-terser";
 import baseConfig from "./rollup.config.base.js";
 import { name as packageName, version } from "../package.json";
 import path from "path";
-
+import scss from "rollup-plugin-scss"
 // banner 保持不变
 const banner =
   `${"/*!\n" + " * "}${packageName}.js v${version}\n` +
@@ -62,12 +62,17 @@ function generateRollupConfigs() {
           globals
         }
       ],
-      plugins: [...baseConfig.plugins, filesize()]
+      plugins: [...baseConfig.plugins, scss({
+        fileName: "form-design.css",
+        failOnError: true,
+        //sourceMap: false,
+      }), filesize()]
     });
 
     // --- 压缩版配置（.min.js）---
     configs.push({
       ...baseConfig,
+
       input: entryPath, // 动态设置入口文件
       external,
       output: [
@@ -81,6 +86,11 @@ function generateRollupConfigs() {
       ],
       plugins: [
         ...baseConfig.plugins,
+        scss({
+          fileName: "form-design.css",
+          failOnError: true,
+          //sourceMap: false,
+        }),
         terser({
           compress: {
             drop_console: false,

package/src/assets/css/app-form.css

@@ -3,9 +3,9 @@
 
 .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
 
-.flex-row { -webkit-box-orient: vertical; -ms-flex-direction: row; flex-direction: row; }
+.flex-row { -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }
 
-.flex-row-reverse { -webkit-box-orient: vertical; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
 
 .flex-column, .custom-picker-container { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
 
@@ -17,7 +17,7 @@
 
 .justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
 
-.justify-content-space-around { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; }
+.justify-content-space-around { -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; }
 
 .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 
@@ -27,23 +27,23 @@
 
 .align-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
 
-.flex-wrap-nowrap { -webkit-box-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
 
-.flex-wrap-wrap { -webkit-box-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.flex-wrap-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 
-.flex-wrap-reverse { -webkit-box-wrap: reverse; -ms-flex-wrap: reverse; flex-wrap: reverse; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
 
-.align-content-start { -webkit-box-align: flex-start; -ms-flex-align: flex-start; -webkit-align-conten: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+.align-content-start { -webkit-box-lines: start; -ms-flex-line-pack: start; align-content: flex-start; }
 
-.align-content-end { -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-conten: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+.align-content-end { -webkit-box-lines: end; -ms-flex-line-pack: end; align-content: flex-end; }
 
-.align-content-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-conten: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+.align-content-center { -webkit-box-lines: center; -ms-flex-line-pack: center; align-content: center; }
 
-.align-content-between { -webkit-box-align: space-between; -ms-flex-align: space-between; -webkit-align-conten: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.align-content-between { -webkit-box-lines: justify; -ms-flex-line-pack: justify; align-content: space-between; }
 
-.align-content-around { -webkit-box-align: space-around; -ms-flex-align: space-around; -webkit-align-conten: space-around; -ms-flex-pack: distribute; justify-content: space-around; }
+.align-content-around { -webkit-box-lines: space-around; -ms-flex-line-pack: space-around; align-content: space-around; }
 
-.align-content-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-conten: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; }
+.align-content-stretch { -webkit-box-lines: stretch; -ms-flex-line-pack: stretch; align-content: stretch; }
 
 .flex-item-auto { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
 
@@ -53,7 +53,9 @@
 
 .flex-item-overflowY { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; height: 0; min-height: 0; }
 
-:root { /* 主色调 */ --primary-color: #409EFF; /* 蓝色 */ --info-color: #3bd46c; /* 辅助色 */ --success-color: #3bd46c; /* 绿色 */ --danger-color: #f53f3f; /* 红色 */ --warning-color: #fcad47; /* 橙色 */ /* 文本颜色 */ --text-color: #494949; --gray-7: #86909c; /* 背景色 */ --background-color: #f1eef6; }
+:root { /* 主色调 */ --primary-color: #1989fa; --primary-color-60: rgba(64, 158, 255, 0.8); /* 蓝色 */ --info-color: #3bd46c; /* 辅助色 */ --success-color: #3bd46c; /* 绿色 */ --danger-color: #f53f3f; /* 红色 */ --warning-color: #fcad47; /* 橙色 */ /* 文本颜色 */ --title-text-color: #1c2833; --gray-7: #86909c; /* 背景色 */ --background-color: #f1eef6; --nav-bar-icon-color: '#4c4c4c'
+
+; }
 
 .custom-picker-container { height: 100%; overflow: hidden; }
 
@@ -84,8 +86,42 @@ button[disabled] { opacity: 0.6; }
 
 .van-icon { vertical-align: middle; }
 
+.h100 { height: 100%; }
+
 .app-page { height: 100%; overflow: hidden; }
 
-.app-page .bottom-btns .widget-button { display: -webkit-box; display: -ms-flexbox; display: flex; }
+.app-page .bottom-btns { gap: 15px; padding-left: 10px; padding-right: 10px; }
+
+.app-page .bottom-btns .widget-button { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #646566; }
 
 .app-page .bottom-btns .widget-button .van-icon { display: none; }
+
+.app-page .bottom-btns .widget-button .icon { margin: 0 auto 2px; font-size: 18px; }
+
+.app-page .bottom-btns .widget-button:last-child { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: white; border-radius: 15px; height: 40px; font-size: 14px; margin-right: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: -webkit-gradient(linear, left top, right top, from(var(--primary-color-60)), to(var(--primary-color))); background: -o-linear-gradient(left, var(--primary-color-60), var(--primary-color)); background: linear-gradient(to right, var(--primary-color-60), var(--primary-color)); }
+
+.app-page .bottom-btns .widget-button:last-child .icon { color: #fff; margin: 0 5px 0 0; }
+
+.app-page .widget-row { background: #fff; border-radius: 10px; padding-top: 5px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px; }
+
+.app-page .widget-row .sub-item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 15px; margin-top: 0; border-bottom: none; }
+
+.app-page .widget-row .sub-item-title .left-label { font-size: 16px; font-weight: 600; color: var(--title-text-color); }
+
+.app-page .widget-row .table-pro { padding-left: 10px; padding-right: 10px; }
+
+.app-page .sub-item-title { background: #fff; border-bottom: none; }
+
+.app-page .sub-item-title .title { font-size: 16px; font-weight: 600; color: var(--title-text-color); }
+
+.h4, .h5, .h6, h4, h5, h6 { margin-bottom: 0; margin-top: 0; }
+
+.last-cell-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 10px; }
+
+.last-cell-child.van-cell { padding-bottom: 10px; }
+
+.last-cell-child.van-cell:after { display: none; }
+
+.first-cell-child { border-top-left-radius: 10px; border-top-right-radius: 10px; margin-top: 10px; }
+
+.van-nav-bar .van-icon { color: var(--nav-bar-icon-color); }

package/src/assets/css/global.css

@@ -3,9 +3,9 @@
 
 .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
 
-.flex-row { -webkit-box-orient: vertical; -ms-flex-direction: row; flex-direction: row; }
+.flex-row { -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }
 
-.flex-row-reverse { -webkit-box-orient: vertical; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
 
 .flex-column { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
 
@@ -17,7 +17,7 @@
 
 .justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
 
-.justify-content-space-around { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; }
+.justify-content-space-around { -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; }
 
 .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 
@@ -27,23 +27,23 @@
 
 .align-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
 
-.flex-wrap-nowrap { -webkit-box-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
 
-.flex-wrap-wrap { -webkit-box-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.flex-wrap-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 
-.flex-wrap-reverse { -webkit-box-wrap: reverse; -ms-flex-wrap: reverse; flex-wrap: reverse; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
 
-.align-content-start { -webkit-box-align: flex-start; -ms-flex-align: flex-start; -webkit-align-conten: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+.align-content-start { -webkit-box-lines: start; -ms-flex-line-pack: start; align-content: flex-start; }
 
-.align-content-end { -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-conten: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+.align-content-end { -webkit-box-lines: end; -ms-flex-line-pack: end; align-content: flex-end; }
 
-.align-content-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-conten: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+.align-content-center { -webkit-box-lines: center; -ms-flex-line-pack: center; align-content: center; }
 
-.align-content-between { -webkit-box-align: space-between; -ms-flex-align: space-between; -webkit-align-conten: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.align-content-between { -webkit-box-lines: justify; -ms-flex-line-pack: justify; align-content: space-between; }
 
-.align-content-around { -webkit-box-align: space-around; -ms-flex-align: space-around; -webkit-align-conten: space-around; -ms-flex-pack: distribute; justify-content: space-around; }
+.align-content-around { -webkit-box-lines: space-around; -ms-flex-line-pack: space-around; align-content: space-around; }
 
-.align-content-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-conten: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; }
+.align-content-stretch { -webkit-box-lines: stretch; -ms-flex-line-pack: stretch; align-content: stretch; }
 
 .flex-item-auto { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }