diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index 895573b3e3a6a16d8bbc5322de6f79cfa36a300b..8ae96952e01ad2c1b3800268ddd50d94e7de27fd 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -14,6 +14,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
       <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
       <!-- class style.-->
       <div class="list"
+           [ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
            [class.dropList-highlight]="elementModel.highlightReceivingDropList"
            [style.border-color]="elementModel.highlightReceivingDropListColor"
            [style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
@@ -30,11 +31,11 @@ import { DragNDropValueObject } from '../../models/uI-element';
            [id]="elementModel.id"
            [cdkDropListData]="this"
            [cdkDropListConnectedTo]="elementModel.connectedTo"
-           [cdkDropListOrientation]="elementModel.orientation"
+           [cdkDropListOrientation]="elementModel.orientation !== 'flex' ? $any(elementModel.orientation) : ''"
            [cdkDropListEnterPredicate]="onlyOneItemPredicate"
            (cdkDropListDropped)="drop($event)">
         <ng-container *ngFor="let value of $any(elementModel.value)">
-          <div class="item" *ngIf="!value.imgSrcValue" cdkDrag
+          <div class="item text-item" *ngIf="!value.imgSrcValue" cdkDrag
                [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
                             'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
                [style.background-color]="elementModel.itemBackgroundColor"
@@ -50,6 +51,10 @@ import { DragNDropValueObject } from '../../models/uI-element';
           </div>
           <img *ngIf="value.imgSrcValue"
                [src]="value.imgSrcValue | safeResourceUrl" alt="Image Placeholder"
+               [style.display]="elementModel.orientation === 'flex' ? '' : 'block'"
+               class="item"
+               [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
+                            'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
                cdkDrag (cdkDragStarted)=dragStart() (cdkDragEnded)="dragEnd()"
                [style.object-fit]="'scale-down'">
         </ng-container>
@@ -63,7 +68,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
   styles: [
     '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
     '.list {width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10px}',
-    '.item {border-radius: 10px; padding: 10px;}',
+    '.text-item {border-radius: 10px; padding: 10px;}',
     '.item {cursor: grab}',
     '.item:active {cursor: grabbing}',
     '.vertical-orientation.item:not(:last-child) {margin-bottom: 5px;}',
@@ -75,7 +80,9 @@ import { DragNDropValueObject } from '../../models/uI-element';
     '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
 
     '.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
-    '.dropList-highlight.cdk-drop-list-dragging {border: solid;}'
+    '.dropList-highlight.cdk-drop-list-dragging {border: solid;}',
+
+    '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}'
   ]
 })
 export class DropListComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/drop-list/drop-list.ts b/projects/common/ui-elements/drop-list/drop-list.ts
index 8096efeeb35958f49a719cd18b651be295b6bb8e..ee77442bff54eb883a66ffab6d428229c0fc5cc1 100644
--- a/projects/common/ui-elements/drop-list/drop-list.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.ts
@@ -13,7 +13,7 @@ import { initFontElement, initPositionedElement, initSurfaceElement } from '../.
 export class DropListElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
   onlyOneItem: boolean = false;
   connectedTo: string[] = [];
-  orientation: 'vertical' | 'horizontal' = 'vertical';
+  orientation: 'vertical' | 'horizontal' | 'flex' = 'vertical';
   itemBackgroundColor: string = '#add8e6';
   highlightReceivingDropList: boolean = false;
   highlightReceivingDropListColor: string = '#add8e6';
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
index cb2394f99b95e360f493fa34e5406943ce978920..681f451f50c5b7de84400adbca6b96febb03cdd0 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
@@ -504,7 +504,7 @@
     <mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
     <mat-select [value]="combinedProperties.orientation"
                 (selectionChange)="updateModel.emit({ property: 'orientation', value: $event.value })">
-      <mat-option *ngFor="let option of ['vertical', 'horizontal']"
+      <mat-option *ngFor="let option of ['vertical', 'horizontal', 'flex']"
                   [value]="option">
         {{ 'propertiesPanel.' + option | translate }}
       </mat-option>
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 80336f40b758fc6d72f5f119996509b2906cbfb2..9ec1b610753a6b6c603d7a0ab396a9fa2f127af4 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -132,7 +132,8 @@
     "borderColor": "Randfarbe",
     "borderWidth": "Randstärke",
     "borderStyle": "Linienstil",
-    "selectionColor": "Auswahlfarbe"
+    "selectionColor": "Auswahlfarbe",
+    "flex": "Dynamisch zentriert"
   },
   "player": {
     "autoStart": "Autostart",