- Sets align-self CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
wrap
-
- 'nowrap' | 'wrap' | 'wrap-reverse'
-
-
- Sets flex-wrap CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'nowrap'
-
-
-
-
gap
-
- {coreSpacingTokensTypeString} | Gap
-
-
- Sets gap CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following properties:
-
-
- rowGap: gutter between rows.
-
-
- columnGap: gutter between columns.
-
-
-
-
-
-
-
-
grow
-
- number
-
-
- Sets flex-grow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 0
-
-
-
-
shrink
-
- number
-
-
- Sets flex-shrink CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 1
-
-
-
-
order
-
- number
-
-
- Sets order CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 0
-
-
-
-
basis
-
- string
-
-
- Sets flex-basis CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
+ Sets justify-content CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'normal'
+
+
+
+
order
+
+ number
+
+
+ Sets order CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 0
+
+
+
+
shrink
+
+ number
+
+
+ Sets flex-shrink CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 1
+
+
+
+
wrap
+
+ 'nowrap' | 'wrap' | 'wrap-reverse'
+
+
+ Sets flex-wrap CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'nowrap'
+
+
+
),
},
@@ -254,15 +255,13 @@ const sections = [
},
];
-const FlexCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const FlexCodePage = () => (
+
+
+
+
+
+
+);
export default FlexCodePage;
diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
new file mode 100644
index 0000000000..be0fb0d1eb
--- /dev/null
+++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
@@ -0,0 +1,104 @@
+import { DxcFlex, DxcParagraph, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import Code from "@/common/Code";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The flex component simplifies the creation of flexible and responsive layouts by abstracting the complexity of
+ CSS flexbox. Instead of manually handling flex properties, developers can use this component to build
+ structured and adaptable designs with improved readability and maintainability.
+
+
+ By leveraging flex, layouts can automatically adjust to different screen sizes and content variations,
+ ensuring a seamless user experience. This documentation covers its functionality, best practices, and key
+ concepts to help you use it effectively.
+
+
+ ),
+ },
+ {
+ title: "The flexible box layout module",
+ content: (
+ <>
+
+ The flexible box layout module (usually referred to as flexbox) is a CSS layout model that
+ provides a more efficient way to organize, align, and distribute space among items within a container, even
+ when their size is unknown or dynamic.
+
+
+ Below, we share a series of essential links to help you understand and use the flex component correctly. If
+ you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
+
+
+
+
+ MDN web docs: CSS flexible box layout
+
+
+
+
+ Google web.dev: Flexbox
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use flex for responsive layouts: use the flex component to create layouts that adapt to
+ different screen sizes and content variations.
+
+
+ Prioritize fluidity over fixed sizes: avoid using fixed widths or heights when possible, as
+ they can lead to layout issues on different devices. Instead, leverage flex properties like grow,
+ shrink, and basis to create scalable designs.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Leverage alignment and justification: use justifyContent and{" "}
+ alignItems strategically to control content positioning within the flex container, ensuring a
+ well-structured and visually balanced layout.
+
+
+ Optimize nested flex containers: while nesting flex containers is sometimes necessary,
+ excessive nesting can reduce readability and maintainability. Consider alternative layout strategies when
+ appropriate.
+
+
+ Combine with other layout techniques: flexbox is powerful but not always the best tool for
+ every scenario. Consider using the{" "}
+
+ grid
+ {" "}
+ component for complex two-dimensional layouts or stacked components for simpler structures.
+
+
+ ),
+ },
+];
+
+const FlexOverviewPage = () => (
+
+
+
+
+
+
+);
+
+export default FlexOverviewPage;
diff --git a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx b/apps/website/screens/components/flex/usage/FlexUsagePage.tsx
deleted file mode 100644
index 45f4de8540..0000000000
--- a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { DxcFlex, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Overview",
- content: (
- <>
-
- The Flex component is designed to provide a more efficient way to organize, align, and distribute space among
- items within a container, even when their size is unknown or dynamic (hence the term 'flex').
-
-
- By leveraging the capabilities of the Flex component, developers can create more flexible and responsive
- layouts that adapt to different screen sizes and device types. This powerful tool enables the creation of
- complex structures that can be easily adjusted to accommodate various content types and user interactions.
-
-
- In the sections that follow, we'll explore the core concepts and best practices for using the Flex component.
- By understanding these principles, you can optimize the layout of your application, enhance the user experience,
- and create more engaging and visually appealing interfaces.
-
-
- ),
- },
- {
- title: "Axes",
- content: (
- <>
-
- Flexboxes are comprised mainly of two axes: the main axis and the cross axis. The main axis is defined by the
- flex-direction property, and the cross axis runs perpendicular to it.
-
-
-
- The main axis is defined by flex-direction, which has four possible values: row,{" "}
- row-reverse, column and column-reverse.
-
-
- The cross axis runs perpendicular to the main axis.
-
-
- If the flex-direction (main axis) is set to row or row-reverse the cross axis
- runs down the columns.
-
-
- If the flex-direction is set to column or column-reverse, the cross axis runs
- down the rows.
-
-
-
-
-
- ),
- },
- {
- title: "Start and end",
- content: (
- <>
-
- The flexbox makes no assumption about the writing mode of the document. Left to right or right to left can be
- used depending, for example, on the language used. A start and end edge is used to refer to the direction of
- the placement of elements.
-
-
- For example, If the flex-direction is row and the language is English, then the start edge of the main axis
- will be on the left, the end edge on the right.
-
-
- ),
- },
- {
- title: "Flexbox container",
- content: (
- <>
- An area of a document laid out using flexbox is called a flex container.
-
-
- The items display in a row (the flex-direction property's default is row).
-
- The items start from the start edge of the main axis.
- The items do not stretch on the main dimension, but can shrink.
- The items will stretch to fill the size of the cross axis.
-
-
- ),
- },
-];
-
-const FlexUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default FlexUsagePage;
diff --git a/packages/lib/src/flex/types.ts b/packages/lib/src/flex/types.ts
index e125840f10..e7c28dfcb6 100644
--- a/packages/lib/src/flex/types.ts
+++ b/packages/lib/src/flex/types.ts
@@ -1,10 +1,6 @@
import { ReactNode } from "react";
-import { CoreSpacingTokensType } from "../common/coreTokens";
-type Gap =
- | { rowGap: CoreSpacingTokensType; columnGap?: CoreSpacingTokensType }
- | { rowGap?: CoreSpacingTokensType; columnGap: CoreSpacingTokensType }
- | CoreSpacingTokensType;
+type Gap = { rowGap: string; columnGap?: string } | { rowGap?: string; columnGap: string } | string;
type CommonProps = {
/**
@@ -120,7 +116,7 @@ type Props = CommonProps & {
export type StyledProps = CommonProps & {
$direction?: "row" | "row-reverse" | "column" | "column-reverse";
$wrap?: "nowrap" | "wrap" | "wrap-reverse";
- $gap?: CoreSpacingTokensType | Gap;
+ $gap?: Gap;
$order?: number;
$grow?: number;
$shrink?: number;