PHPackages                             tdoescher/flex-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. tdoescher/flex-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

tdoescher/flex-bundle
=====================

Flexbox-/Grid-Layout System (kompatibel mit Bootstrap)

3.5.3(1mo ago)1660↓100%1LGPL-3.0-or-laterPHPPHP >=8.1

Since Oct 12Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/tdoescher/contao-flex-bundle)[ Packagist](https://packagist.org/packages/tdoescher/flex-bundle)[ RSS](/packages/tdoescher-flex-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (30)Used By (1)

Flexbox-/Grid-Layout System (kompatibel mit Bootstrap)
======================================================

[](#flexbox-grid-layout-system-kompatibel-mit-bootstrap)

Note

In Version 3.2 wurden die alten Legacy-Elemente entfernt.

Dieses Bundle erweitert Contao um Content-Elemente zum Erzeugen von Flexbox Layouts auf Basis von Bootstrap-Klassen [Bootstrap 5](https://getbootstrap.com). Durch ein öffnendes Element wird ein Layout gestartet und die Spalten konfiguriert. Alle Content-Elemente innerhalb des Layouts werden dann in ein DIV verpackt und mit den entsprechenden CSS-Klassen ausgegeben.

**Im Seitenlayout muss das JavaScript-Template js\_flex aktiviert werden (dient nur dazu das CSS-Framework zu laden, beinhaltet kein JavaScript), alternativ kann das Bootstrap Framework geladen werden.**

Framework-Modus
---------------

[](#framework-modus)

Über das Feld **Framework** wird gesteuert, welche CSS-Klassen generiert werden:

- **0 – ohne Framework:** Eigene `.cell`-Klassen (`cell`, `cell-1`, `cell-2`, …). Kein Bootstrap notwendig.
- **1 – Flexbox (Bootstrap):** Bootstrap-Klassen wie `.col-*`, `.offset-*`. Dokumentiert im Abschnitt „Flex-Layout".
- **2 – Grid:** Bootstrap-Grid-Klassen wie `.col-*`, `.row-*`. Dokumentiert im Abschnitt „Grid-Layout".

Container-Optionen
------------------

[](#container-optionen)

FeldBeschreibung**Ausrichtung horizontal**Setzt `justify-content-*` auf dem Container (`start`, `end`, `center`, `around`, `between`, `evenly`)**Ausrichtung vertikal**Setzt `align-items-*` auf dem Container (`start`, `end`, `center`, `baseline`, `stretch`)**Spaltenabstand**Setzt `gx-*` (horizontal, Bootstrap `g-0` bis `g-5`)**Zeilenabstand**Setzt `gy-*` (vertikal, Bootstrap `g-0` bis `g-5`)**Container Klassen**Beliebige zusätzliche CSS-Klassen für den Container-DIVSpalten-Optionen
----------------

[](#spalten-optionen)

FeldBeschreibung**Spalten Klassen**Eigene CSS-Klassen je Spalte, Syntax identisch zu den Breakpoint-Feldern: Zellen durch `:` getrennt, mehrere Klassen pro Zelle durch `,` getrennt**Wiederholen**Wiederholt das Segmentierungsmuster, wenn mehr Kindelemente vorhanden sind als Zellen definiert wurdenZellen-Optionen (CSS-Hilfsklassen)
----------------------------------

[](#zellen-optionen-css-hilfsklassen)

Folgende CSS-Klassen können über das Feld **Spalten Klassen** auf einzelne Zellen angewendet werden:

**Horizontale Ausrichtung (`justify-self`)**

KlasseBeschreibung`justify-self-start`Richtet die Zelle horizontal am Anfang aus`justify-self-end`Richtet die Zelle horizontal am Ende aus`justify-self-center`Richtet die Zelle horizontal mittig aus`justify-self-around`Horizontale Ausrichtung: space-around`justify-self-between`Horizontale Ausrichtung: space-between`justify-self-evenly`Horizontale Ausrichtung: space-evenlyAlle Klassen sind auch mit Breakpoint-Suffix verfügbar: `justify-self-sm-*`, `justify-self-md-*`, `justify-self-lg-*`, `justify-self-xl-*`, `justify-self-xxl-*`.

**Vertikale Ausrichtung (`align-self`)**

KlasseBeschreibung`align-self-auto`Setzt die vertikale Ausrichtung zurück`align-self-start`Richtet die Zelle vertikal am Anfang aus`align-self-end`Richtet die Zelle vertikal am Ende aus`align-self-center`Richtet die Zelle vertikal mittig aus`align-self-baseline`Richtet die Zelle an der Textbasislinie aus`align-self-stretch`Dehnt die Zelle auf die volle Höhe ausAlle Klassen sind auch mit Breakpoint-Suffix verfügbar: `align-self-sm-*`, `align-self-md-*`, `align-self-lg-*`, `align-self-xl-*`, `align-self-xxl-*`.

Dokumentation Flex-Layout
-------------------------

[](#dokumentation-flex-layout)

### 1. Stelle: Sichtbarkeit (optional)

[](#1-stelle-sichtbarkeit-optional)

- **h, hide, hidden:** Blendet eine Zelle aus.
- **s, show:** Blendet die Zelle ein.

```
 XL: 4:4:4:h 		letzte Zelle wird ausgeblendet
XXL: 3:3:3:3:s,3 	letzte Zelle wird wieder eingeblendet

```

### 2. Stelle: Breite

[](#2-stelle-breite)

- **1 - 12:** Anzahl der Spalten über die sich die Zelle erstreckt.
- **a, auto:** Breite der Zelle richtet sich nach dessen Inhalt.
- **n, none:** ohne Breitenangabe, alle Zellen in einer Zeile sind gleich breit.

### 3. Stelle: Versatz (optional)

[](#3-stelle-versatz-optional)

- **0 - 12:** Versatz vor der Zelle über Anzahl der 12 Spalten.

```
MD: 8,2		alle Zellen werden mittig zwei Drittel der Breite angezeigt
XL: 6		alle Zellen werden nebeneinander angezeigt

```

### 4. Stelle: Position bzw. Order (optional)

[](#4-stelle-position-bzw-order-optional)

- **f, first:** Positioniert die Zelle an den Anfang.
- **l, last:** Positioniert die Zelle an das Ende.
- **1 - 12:** Positioniert die Zelle an die angegebene Position.

```
MD: 6,,1:6,,2:6,,4:6,,3		die dritte und vierte Zelle werden vertauscht
XL: 6,,l:6,,f			erste und zweite Zelle werden vertauscht

```

Dokumentation Grid-Layout
-------------------------

[](#dokumentation-grid-layout)

### 1. Stelle: Sichtbarkeit (optional)

[](#1-stelle-sichtbarkeit-optional-1)

- **h, hide, hidden:** Blendet eine Zelle aus.
- **s, show:** Blendet die Zelle ein.

### 2. Stelle: Spalte $START / $BREITE

[](#2-stelle-spalte-start--breite)

- **$START 1-12:** Position von links in der die Zelle beginnt. (optional)
- **$START a:** Position zurücksetzen. (optional)
- **$BREITE 1-12:** Anzahl der Spalten über die sich die Zelle erstreckt.

```
Beide Angaben werden durch ein / getrennt:	grid-column: $START / span $BREITE

```

### 3. Stelle: Zeile $START / $HÖHE

[](#3-stelle-zeile-start--höhe)

- **$START 1-12:** Position von oben in der die Zelle beginnt. (optional)
- **$START a:** Position zurücksetzen. (optional)
- **$HÖHE 1-12:** Anzahl der Zeilen über die sich die Zelle erstreckt.

```
Beide Angaben werden durch ein / getrennt:	grid-row: $START / span $HÖHE

```

### 4. Stelle: Position bzw. Order (optional)

[](#4-stelle-position-bzw-order-optional-1)

- **f, first:** Positioniert die Zelle an den Anfang.
- **l, last:** Positioniert die Zelle an das Ende.
- **1 - 12:** Positioniert die Zelle an die angegebene Position.

Breite der Spalten:
-------------------

[](#breite-der-spalten)

[![](doc/overview-columns.png)](doc/overview-columns.png)

###  Health Score

51

—

FairBetter than 96% of packages

Maintenance96

Actively maintained with recent releases

Popularity18

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity69

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~57 days

Recently: every ~6 days

Total

29

Last Release

51d ago

Major Versions

1.0.2 → 2.0.02023-01-19

2.0.4 → 3.0.12024-02-23

PHP version history (4 changes)1.0.0PHP >=7.4

2.0.0PHP >=8.0

3.2.0PHP >=8.3

3.5.0PHP >=8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/52fba781c251d0a4d80e95afe0d960315fd889c74a109f50d73bb914e4eb1d94?d=identicon)[tdoescher](/maintainers/tdoescher)

---

Top Contributors

[![tdoescher](https://avatars.githubusercontent.com/u/3490810?v=4)](https://github.com/tdoescher "tdoescher (83 commits)")

---

Tags

gridflexcontaolayoutcolumnsflexbox

### Embed Badge

![Health badge](/badges/tdoescher-flex-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/tdoescher-flex-bundle/health.svg)](https://phpackages.com/packages/tdoescher-flex-bundle)
```

###  Alternatives

[desandro/masonry

Cascading grid layout library

16.7k424.4k1](/packages/desandro-masonry)[codenco-dev/nova-grid-system

A Laravel Nova tool to have a grid system

80300.1k](/packages/codenco-dev-nova-grid-system)[madeyourday/contao-rocksolid-custom-elements

Create your own, nestable content elements using a modular system. End the WYSIWYG chaos with your own content elements.

50341.9k12](/packages/madeyourday-contao-rocksolid-custom-elements)[madeyourday/contao-rocksolid-columns

Arrange your content elements in responsive columns

10116.5k2](/packages/madeyourday-contao-rocksolid-columns)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3183.3k6](/packages/codefog-contao-news-categories)[terminal42/contao-folderpage

Provides a new page type for Contao that allows you to group pages into folders.

18147.9k9](/packages/terminal42-contao-folderpage)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)