Fix broken styles for examples

Author: HerbertsVaadin

articles/components/flex-layout/index.adoc

@@ -26,6 +26,10 @@ The Flow API provides convenient constants and methods that make Flex Layout con
 
 [.example]
 --
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-basic.ts[preimport,hidden]
+----
 
 [source,java]
 ----
@@ -36,6 +40,10 @@ include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutBas
 By default, Flex Layout arranges its items in a single horizontal row without wrapping.
 This behavior corresponds to the CSS `flex-wrap` property, which can be easily customized through the API.
 
+[NOTE]
+For all examples in this document, custom gaps and padding have been applied to make the layouts clearer and less cluttered.
+In real-world applications, you would typically adjust these values as needed to achieve the desired spacing and sizing.
+
 
 == Direction
 
@@ -44,6 +52,10 @@ You can change this behavior by setting a different direction, which corresponds
 
 [.example]
 --
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-direction.ts[preimport,hidden]
+----
 
 [source,java]
 ----
@@ -77,6 +89,11 @@ This corresponds to the CSS `flex-wrap` property.
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-wrap.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutWrap.java[render,tags=snippet,indent=0,group=Flow]
@@ -109,6 +126,11 @@ This corresponds to the CSS `align-content` property.
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-content-alignment.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutContentAlignment.java[render,tags=snippet,indent=0,group=Flow]
@@ -148,6 +170,11 @@ This corresponds to the CSS `justify-content` property.
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-justify-content.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutJustifyContent.java[render,tags=snippet,indent=0,group=Flow]
@@ -187,6 +214,11 @@ Individual items can override the layout’s alignment setting using the `align-
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-item-alignment.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutItemAlignment.java[render,tags=snippet,indent=0,group=Flow]
@@ -229,6 +261,11 @@ Setting a component’s order back to `0` removes any custom ordering and restor
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-item-order.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutItemOrder.java[render,tags=snippet,indent=0,group=Flow]
@@ -243,6 +280,11 @@ This corresponds to the CSS `flex-basis` property.
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-basis.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutBasis.java[render,tags=snippet,indent=0,group=Flow]
@@ -262,6 +304,11 @@ The `flex-shrink` property defines how much a component contracts relative to ot
 [.example]
 --
 
+[source,typescript]
+----
+include::{root}/frontend/demo/component/flex-layout/flex-layout-flex-grow-shrink.ts[preimport,hidden]
+----
+
 [source,java]
 ----
 include::{root}/src/main/java/com/vaadin/demo/component/flexlayout/FlexLayoutFlexGrowShrink.java[render,tags=snippet,indent=0,group=Flow]