diff --git a/src/col/README.md b/src/col/README.md index d32ee1d89..949d2c215 100644 --- a/src/col/README.md +++ b/src/col/README.md @@ -51,36 +51,28 @@ Set grid spacing using `gutter` attribute. The default value is 0. ``` -### Flex Layout - -Setting `type` to `flex` to enable flex layout. +### Justify Content ```html - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - - span: 6 - span: 6 - span: 6 - - - + span: 6 span: 6 span: 6 @@ -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` | diff --git a/src/col/README.zh-CN.md b/src/col/README.zh-CN.md index f81bad273..c005f499d 100644 --- a/src/col/README.zh-CN.md +++ b/src/col/README.zh-CN.md @@ -50,41 +50,34 @@ Layout 组件提供了 `24列栅格`,通过在 `Col` 上添加 `span` 属性 ``` -### Flex 布局 +### 对齐方式 -将 `type` 属性设置为 flex 可以启用 flex 布局,便于进行灵活的对齐。 +通过 `justify` 属性可以设置主轴上内容的对齐方式,等价于 flex 布局中的 `justify-content` 属性。 ```html - - - span: 6 - span: 6 - span: 6 - - - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 @@ -97,11 +90,10 @@ Layout 组件提供了 `24列栅格`,通过在 `Col` 上添加 `span` 属性 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 布局方式,可选值为`flex` | _string_ | - | | gutter | 列元素之间的间距(单位为 px) | _number \| string_ | - | | tag | 自定义元素标签 | _string_ | `div` | -| justify | Flex 主轴对齐方式,可选值为 `end` `center`
`space-around` `space-between` | _string_ | `start` | -| align | Flex 交叉轴对齐方式,可选值为 `center` `bottom` | _string_ | `top` | +| justify | 主轴对齐方式,可选值为 `end` `center`
`space-around` `space-between` | _string_ | `start` | +| align | 交叉轴对齐方式,可选值为 `center` `bottom` | _string_ | `top` | ### Col Props diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue index 5b396922a..041bce8e1 100644 --- a/src/col/demo/index.vue +++ b/src/col/demo/index.vue @@ -29,32 +29,26 @@
- - + + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - + span: 6 span: 6 span: 6 - - span: 6 - span: 6 - span: 6 - - - + span: 6 span: 6 span: 6 @@ -68,11 +62,11 @@ export default { i18n: { 'zh-CN': { title2: '在列元素之间增加间距', - title3: 'Flex 布局', + justify: '对齐方式', }, 'en-US': { title2: 'Column Spacing', - title3: 'Flex Layout', + justify: 'Justify Content', }, }, }; diff --git a/src/col/index.less b/src/col/index.less index 35fa2f4f5..982e64edd 100644 --- a/src/col/index.less +++ b/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} { diff --git a/src/row/index.less b/src/row/index.less index 3858f4d68..42d22b0a4 100644 --- a/src/row/index.less +++ b/src/row/index.less @@ -1,19 +1,7 @@ @import '../style/var'; .van-row { - &::after { - display: table; - clear: both; - content: ''; - } - - &--flex { - display: flex; - - &::after { - display: none; - } - } + display: flex; &--justify-center { justify-content: center; diff --git a/src/row/index.tsx b/src/row/index.tsx index 0d29e8d00..c5c864b4b 100644 --- a/src/row/index.tsx +++ b/src/row/index.tsx @@ -23,7 +23,6 @@ export type RowJustify = export default createComponent({ props: { - type: String as PropType<'flex'>, align: String as PropType, justify: String as PropType, tag: { @@ -87,15 +86,12 @@ export default createComponent({ linkChildren({ spaces }); return () => { - const { tag, type, align, justify } = props; - const flex = type === 'flex'; - + const { tag, align, justify } = props; return ( {slots.default?.()}