init project

docs/data/system/flexbox/FlexWrap.js

@@ -0,0 +1,104 @@
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={[
+        (theme) => ({
+          p: 1,
+          m: 1,
+          bgcolor: 'grey.100',
+          color: 'grey.800',
+          border: '1px solid',
+          borderColor: 'grey.300',
+          borderRadius: 2,
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+            borderColor: 'grey.800',
+          }),
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
+    ),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default function FlexWrap() {
+  return (
+    <div style={{ width: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'nowrap',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 300,
+          borderRadius: 1,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 300,
+          borderRadius: 1,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap-reverse',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 300,
+          borderRadius: 1,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+      </Box>
+    </div>
+  );
+}