IMPRO,REFA,FEAT: extended distributeSpacingEvengly

it now can be either executed directly or on generate.
it allows defining excess spaces/gaps.

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}
      */
@@ -69,25 +78,18 @@ class FlexContainerComponent extends Component {
 
     /**
      * 
-     * @returns {FlexContainerComponent}
+     * @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
      */
-    distibuteSpacingEvenly() {
+    _distributingSpacing(recessFraction = 0.0, gapPerChild = 1) {
-        this._distributeEvenglyAfterGenerate = true;
-        return this;
-    }
-
-
-    /**
-     * @override
-     * @inheritdoc
-     * @extends Component.generate()
-     */
-    generate(generator = singlepage, styleStore = null, functionStore = null) {
         if (this._children && this._children.length > 1) {
 
-            if (this._distributeEvenglyAfterGenerate) {
+            let distributableSpace = 100 - 100 * recessFraction - (this._children.length - 1) * gapPerChild;
+
             let childDistributionFraction = Math.floor(
-                    ((100 - this._children.length) / this._children.length) * 100
+                (distributableSpace / this._children.length) * 100
             ) / 100;
 
             let direction = (this._flexDirection === 'column' ? 'height' : "width");
@@ -104,6 +106,41 @@ class FlexContainerComponent extends Component {
         }
     }
 
+    /**
+     * 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(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;
+    }
+
+
+    /**
+     * @override
+     * @inheritdoc
+     * @extends Component.generate()
+     */
+    generate(generator = singlepage, styleStore = null, functionStore = null) {
+        if (this._distributeEvenglyAfterGenerate) {
+            this._distributingSpacing(this.#distributionRecess, this.#distributionGapPerChild);
+        }
+
         return super.generate(generator, styleStore, functionStore);
     }
 }