diff --git a/src/component/FlexContainerComponent.js b/src/component/FlexContainerComponent.js
index 13a0264..0f46425 100644
--- a/src/component/FlexContainerComponent.js
+++ b/src/component/FlexContainerComponent.js
@@ -9,6 +9,15 @@ class FlexContainerComponent extends Component {
      * @type {boolean}
      */
     _distributeEvenglyAfterGenerate;
+    /**
+     * @type {number} the amount that should be left out of the total space before the children
+     *                space is set. 
+     */
+    #distributionRecess;
+    /**
+     * @type {number} the additional gap that should be left for children before their space is set
+     */
+    #distributionGapPerChild;
     /**
      * @type {string}
      */
@@ -68,11 +77,56 @@ class FlexContainerComponent extends Component {
     }
 
     /**
-     *
+     * 
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore inbetween children 
+     *                 that shouldn't be distributed to the children
+     */
+    _distributingSpacing(recessFraction = 0.0, gapPerChild = 1) {
+        if (this._children && this._children.length > 1) {
+
+            let distributableSpace = 100 - 100 * recessFraction - (this._children.length - 1) * gapPerChild;
+
+            let childDistributionFraction = Math.floor(
+                (distributableSpace / this._children.length) * 100
+            ) / 100;
+
+            let direction = (this._flexDirection === 'column' ? 'height' : "width");
+
+            for (const icomp of this._children) {
+                /* sets the width for all elements,
+                to avoid overlapping or line break because of lacking width,
+                a percent is subtracted for every child element  */
+                /* To enable "override" a new Modifier is generated and joined
+                with the modifier of the component */
+                icomp._modifier._modifications[direction] = childDistributionFraction + "%";
+                icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
+            }
+        }
+    }
+
+    /**
+     * Distributes the spacing of the childrens evengly, 
+     * according to the flexdirection of this component.
+     * By default this will be executed imediately when called.
+     * 
+     * @param {boolean} [rightNow=true] if set to false it will set properties accordingly
+     *                  so that the distribution will be executed on generate
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore inbetween children 
+     *                 that shouldn't be distributed to the children 
      * @returns {FlexContainerComponent}
      */
-    distibuteSpacingEvenly() {
-        this._distributeEvenglyAfterGenerate = true;
+    distibuteSpacingEvenly(rightNow = true, recessFraction = 0.0, gapPerChild = 1) {
+        if (rightNow) {
+            this._distributingSpacing(recessFraction, gapPerChild);
+        } else {
+            this.#distributionRecess = recessFraction;
+            this.#distributionGapPerChild = gapPerChild;
+            this._distributeEvenglyAfterGenerate = true;
+        }
         return this;
     }
 
@@ -83,25 +137,8 @@ class FlexContainerComponent extends Component {
      * @extends Component.generate()
      */
     generate(generator = singlepage, styleStore = null, functionStore = null) {
-        if (this._children && this._children.length > 1) {
-
-            if (this._distributeEvenglyAfterGenerate) {
-                let childDistributionFraction = Math.floor(
-                    ((100 - this._children.length) / this._children.length) * 100
-                ) / 100;
-
-                let direction = (this._flexDirection === 'column' ? 'height' : "width");
-
-                for (const icomp of this._children) {
-                    /* sets the width for all elements,
-                    to avoid overlapping or line break because of lacking width,
-                    a percent is subtracted for every child element  */
-                    /* To enable "override" a new Modifier is generated and joined
-                    with the modifier of the component */
-                    icomp._modifier._modifications[direction] = childDistributionFraction + "%";
-                    icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
-                }
-            }
+        if (this._distributeEvenglyAfterGenerate) {
+            this._distributingSpacing(this.#distributionRecess, this.#distributionGapPerChild);
         }
 
         return super.generate(generator, styleStore, functionStore);