Skip to main content

Flex 弹性布局

何时使用​

  • 适合设置元素之间的间距;
  • 适合设置各种水平、垂直对齐方式。

代码演示​

horizontal demo

代码
<template>
    <erFlex justify="center" aligns="center" :outStyleFlex="{height: '100vh', gap: '20px'}" >
      <div style="width: 100px; height: 100px; border: 1px solid #ccc;">
        <erFlex>
          <div style="width: 20px; height: 20px; background-color: red;">1</div>
          <div style="width: 20px; height: 20px; background-color: green;">2</div>
          <div style="width: 20px; height: 20px; background-color: yellow;">3</div>
        </erFlex>
      </div>
      <div style="width: 100px; height: 100px; border: 1px solid #ccc;">
        <erFlex 
          justify="space-between" 
          aligns="center" 
        >
          <div style="width: 20px; height: 20px; background-color: red;">1</div>
          <div style="width: 20px; height: 20px; background-color: green;">2</div>
          <div style="width: 20px; height: 20px; background-color: yellow;">3</div>
        </erFlex>
      </div>
    </erFlex>
</template>

API​

备注

自errantia@0.x版本开始提供改组件，Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为向右对齐，你可以通过属性进行调整。

Attributes​

属性名说明类型默认值
verticalflex 主轴的方向是否垂直，使用 flex-direction: columnbooleanfalse
justify设置元素在主轴方向上的对齐方式参考 justify-contentnormal
align设置元素在交叉轴方向上的对齐方式参考 align-itemsnormal
outStyleFlex自定义元素样式Object—