Flexbox 弹性布局

优质

小牛编辑

128浏览

2023-12-01

import { Flexbox,FlexboxItem } from 'feui';
components: {
  [Flexbox.name]: Flexbox,
  [FlexboxItem.name]: FlexboxItem
}

.flex-demo{
  text-align: center;
  color: #fff;
  background-color: #4a90e2;
  border-radius: 4px;
  background-clip: padding-box;
}

代码演示

横向排列

<flexbox>
  <flexbox-item>
    <div class="flex-demo">1</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">2</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">3</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">4</div>
  </flexbox-item>
</flexbox>

横排无空隙

<flexbox :gutter="0">
  <flexbox-item>
    <div class="flex-demo">1</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">2</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">3</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">4</div>
  </flexbox-item>
</flexbox>

垂直排列

<flexbox orient="vertical">
  <flexbox-item>
    <div class="flex-demo">1</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">2</div>
  </flexbox-item>
</flexbox>

垂直无空隙

<flexbox orient="vertical" :gutter="0">
  <flexbox-item>
    <div class="flex-demo">1</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">2</div>
  </flexbox-item>
</flexbox>

栅格系统(12列)

<flexbox>
  <flexbox-item :span="4">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">2/3</div>
  </flexbox-item>
</flexbox>

灵活网格

<flexbox>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/6">
    <div class="flex-demo">1/6</div>
  </flexbox-item>
  <flexbox-item :span="1/8">
    <div class="flex-demo">1/8</div>
  </flexbox-item>
  <flexbox-item :span="1/8">
    <div class="flex-demo">1/8</div>
  </flexbox-item>
  <flexbox-item>
    <div class="flex-demo">rest</div>
  </flexbox-item>
</flexbox>

灵活网格2

<flexbox :gutter="0">
  <flexbox-item :span="1/3" :order="4">
    <div class="flex-demo">1</div>
  </flexbox-item>
  <flexbox-item :span="1/6" :order="3">
    <div class="flex-demo">2</div>
  </flexbox-item>
  <flexbox-item :span="1/8" :order="2">
    <div class="flex-demo">3</div>
  </flexbox-item>
  <flexbox-item :span="1/8" :order="1">
    <div class="flex-demo">4</div>
  </flexbox-item>
  <flexbox-item :order="-99">
    <div class="flex-demo">5</div>
  </flexbox-item>
</flexbox>

溢出换行

<flexbox :gutter="0" wrap="wrap">
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
  </flexbox-item>
  <flexbox-item :span="1/3">
    <div class="flex-demo">1/3</div>
    </flexbox-item>
</flexbox>

API

参数	说明	类型	默认值	可选值
gutter	间隙像素大小（px）	`Number`	`8`	-
orient	排列方向	`String`	`horizontal`	`horizontal`,`vertical`
justify	flex的justify-content属性	`String`	-	-
align	flex的align-items属性	`String`	-	-
wrap	flex的flex-wrap属性	`String`	-	-
direction	flex的flex-direction属性	`String`	-	-
-	-	-	-	-

Slots

Slot名	说明	备注
default	flexbox-item的内容插槽	-
-	-	-

FlexboxItem

API

参数	说明	类型	默认值	可选值
span	占用宽度，如果不设置，所有flexbox-item将平分	`Number`	`8`	-
order	flex的order属性	`String`	`8`	-
-	-	-	-	-

Slots

Slot名	说明	备注
default	内容插槽	-
-	-	-