refactor(Layout): enable flex by default, remove type prop

src/col/README.md

@@ -51,36 +51,28 @@ Set grid spacing using `gutter` attribute. The default value is 0.
 </van-row>
 ```
 
-### Flex Layout
+### Justify Content
-
-Setting `type` to `flex` to enable flex layout.
 
 ```html
-<van-row type="flex">
+<van-row justify="center">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
-<van-row type="flex" justify="center">
+<van-row justify="end">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
-<van-row type="flex" justify="end">
+<van-row justify="space-between">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
-<van-row type="flex" justify="space-between">
+<van-row justify="space-around">
-  <van-col span="6">span: 6</van-col>
-  <van-col span="6">span: 6</van-col>
-  <van-col span="6">span: 6</van-col>
-</van-row>
-
-<van-row type="flex" justify="space-around">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
@@ -93,7 +85,6 @@ Setting `type` to `flex` to enable flex layout.
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| type | Layout type, can be set to `flex` | _string_ | - |
 | gutter | Grid spacing（px） | _number \| string_ | - |
 | tag | Custom element tag | _string_ | `div` |
 | justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |

src/col/README.zh-CN.md

@@ -50,41 +50,34 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
 </van-row>
 ```
 
-### Flex 布局
+### 对齐方式
 
-将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。
+通过 `justify` 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 `justify-content` 属性。
 
 ```html
-<!-- 左对齐 -->
-<van-row type="flex">
-  <van-col span="6">span: 6</van-col>
-  <van-col span="6">span: 6</van-col>
-  <van-col span="6">span: 6</van-col>
-</van-row>
-
 <!-- 居中 -->
-<van-row type="flex" justify="center">
+<van-row justify="center">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
 <!-- 右对齐 -->
-<van-row type="flex" justify="end">
+<van-row justify="end">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
 <!-- 两端对齐 -->
-<van-row type="flex" justify="space-between">
+<van-row justify="space-between">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
 </van-row>
 
 <!-- 每个元素的两侧间隔相等 -->
-<van-row type="flex" justify="space-around">
+<van-row justify="space-around">
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
   <van-col span="6">span: 6</van-col>
@@ -97,11 +90,10 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 布局方式，可选值为`flex` | _string_ | - |
 | gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
 | tag | 自定义元素标签 | _string_ | `div` |
-| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
+| justify | 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
-| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
+| align | 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
 
 ### Col Props
 

src/col/demo/index.vue

@@ -29,32 +29,26 @@
       </van-row>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('title3')">
+    <demo-block v-if="!isWeapp" :title="t('justify')">
-      <van-row type="flex">
+      <van-row justify="center">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row type="flex" justify="center">
+      <van-row justify="end">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row type="flex" justify="end">
+      <van-row justify="space-between">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row type="flex" justify="space-between">
+      <van-row justify="space-around">
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-      </van-row>
-
-      <van-row type="flex" justify="space-around">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
@@ -68,11 +62,11 @@ export default {
   i18n: {
     'zh-CN': {
       title2: '在列元素之间增加间距',
-      title3: 'Flex 布局',
+      justify: '对齐方式',
     },
     'en-US': {
       title2: 'Column Spacing',
-      title3: 'Flex Layout',
+      justify: 'Justify Content',
     },
   },
 };

src/col/index.less

@@ -1,7 +1,7 @@
 @import '../style/var';
 
 .van-col {
-  float: left;
+  display: block;
   box-sizing: border-box;
   min-height: 1px;
 }
@@ -9,7 +9,8 @@
 .generate-col(24);
 .generate-col(@n, @i: 1) when (@i =< @n) {
   .van-col--@{i} {
-    width: @i * 100% / 24;
+    flex: 0 0 @i * 100% / 24;
+    max-width: @i * 100% / 24;
   }
 
   .van-col--offset-@{i} {

src/row/index.less

@@ -1,19 +1,7 @@
 @import '../style/var';
 
 .van-row {
-  &::after {
+  display: flex;
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  &--flex {
-    display: flex;
-
-    &::after {
-      display: none;
-    }
-  }
 
   &--justify-center {
     justify-content: center;

src/row/index.tsx

@@ -23,7 +23,6 @@ export type RowJustify =
 
 export default createComponent({
   props: {
-    type: String as PropType<'flex'>,
     align: String as PropType<RowAlign>,
     justify: String as PropType<RowJustify>,
     tag: {
@@ -87,15 +86,12 @@ export default createComponent({
     linkChildren({ spaces });
 
     return () => {
-      const { tag, type, align, justify } = props;
+      const { tag, align, justify } = props;
-      const flex = type === 'flex';
-
       return (
         <tag
           class={bem({
-            flex,
+            [`align-${align}`]: align,
-            [`align-${align}`]: flex && align,
+            [`justify-${justify}`]: justify,
-            [`justify-${justify}`]: flex && justify,
           })}
         >
           {slots.default?.()}