Flex 弹性容器 组件用于设置内容的间距和对齐方式。
用例 基础用法 放置在容器内的组件预设了 8px 的间距，可以通过 gap 属性重新设置。
show code
< template> < Flex> < Button> </ Button> < Button> </ Button> < Button> </ Button> </ Flex> < br/> < Flexgap = " 30px" > < Button> </ Button> < Button> </ Button> < Button> </ Button> </ Flex> </ template> < script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'
export default defineComponent ( {
components: {
Flex,
Button
}
} )
</ script> 内联元素 容器默认为块级元素，可以添加 inline 属性声明成内联元素。
show code
< template> < Flexinline > < Button> </ Button> < Button> </ Button> </ Flex> </ template> < script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'
export default defineComponent ( {
components: {
Flex,
Button
}
} )
</ script> 允许换行 设置 wrap 属性，允许空间不足时换行。
one
two
three
four
five
six
seven
eight
nine
ten
eleven
show code
< template> < Flexwrap > < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> </ Flex> </ template> < script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'
export default defineComponent ( {
components: {
Flex,
Button
}
} )
</ script> 垂直排列 vertical 属性可以使元素垂直排列
如果指定了 Flex 组件的高度，可以添加 wrap 使之内容允许换行。
show code
< template> < divclass = " box" > < Flexflow = " column" > < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < divclass = " box" > < Flexflow = " column" wrap style = " height : 100px" > < Button> </ Button> < Button> </ Button> < Button> </ Button> < Button> </ Button> </ Flex> </ div> </ template> < script>
import { defineComponent } from 'vue'
import { Button, Flex } from 'comz'
export default defineComponent ( {
components: {
Button,
Flex
}
} )
</ script> < stylescoped >
.box {
display : inline-flex;
height : 100px;
width : 150px;
margin-right : 40px;
outline : 1px rgba ( 0, 0, 0, 0.2) dashed;
}
</ style> 对齐方式 通过 justify 和 align 和 center 属性设置内容的对齐方式。
justify 对应 flex 中 justify-content 属性，设置容器主轴的对齐方式。align 对应 flex 中 align-items 属性，设置容器交叉轴上项的对齐方式。center 属性是预设值，可以使容器项水平垂直居中。
show code
< template> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < br/> < br/> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> < divclass = " box" > < Flex> < Button> </ Button> < Button> </ Button> </ Flex> </ div> </ template> < script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'
export default defineComponent ( {
components: {
Flex,
Button
}
} )
</ script> < stylescoped >
.box {
display : inline-block;
height : 100px;
width : 150px;
margin-right : 40px;
vertical-align : top;
overflow : hidden;
outline : 1px rgba ( 0, 0, 0, 0.2) dashed;
}
</ style> API 属性 Attribute Type Default Description inline booleanfalse声明为内联容器 gap <length>'8px'项的间距 justify <justify-content>'flex-start'主轴的对齐方式 align <align-items>'flex-start'交叉轴上项的对齐方式 center booleanfalse容器内容水平垂直居中 vertical booleanfalse是否垂直排列
插槽 Slot Description default 默认插槽