CSS Flexbox Simulator

9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/FlexboxSimulatorBackground/Sun/Sun.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Sun(props) { 4 | return ( 5 | 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | import { GoogleAnalytics } from "nextjs-google-analytics"; 4 | 5 | export default function App({ Component, pageProps }: AppProps) { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Flexbox Simulator 2 | 3 | It is very simple flexbox simulator in which you can understand quickly how to build your CSS Flexbox Container according to your needs. 4 | 5 | The main idea is to modify the flexbox-container inputs and see how the flexbox-items react. 6 | 7 | **_Live Demo:_** https://juliansci.github.io/css-flexbox-simulator/ 8 | 9 | ## License 10 | 11 | [MIT](https://choosealicense.com/licenses/mit/) 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Footer/index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | width: 100%; 4 | background-color: #0c090a; 5 | color: white; 6 | display: flex; 7 | align-items: center; 8 | justify-content: flex-end; 9 | } 10 | 11 | .name { 12 | font-size: 14px; 13 | margin-right: 20px; 14 | font-weight: 700; 15 | color: white; 16 | text-decoration: none; 17 | } 18 | 19 | .socialContainer { 20 | font-size: 14px; 21 | margin-right: 20px; 22 | } 23 | 24 | .socialItem { 25 | color: white; 26 | text-decoration: none; 27 | margin-right: 15px; 28 | font-size: 18px; 29 | cursor: pointer; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Header/index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | width: 100%; 4 | background-color: #0c090a; 5 | color: white; 6 | display: flex; 7 | justify-content: space-between; 8 | } 9 | 10 | .title { 11 | font-size: 27px; 12 | padding: 18px 40px; 13 | } 14 | 15 | .linkGithub { 16 | font-size: 13px; 17 | margin-top: 29px; 18 | margin-right: 34px; 19 | cursor: pointer; 20 | color: white; 21 | text-decoration: none; 22 | } 23 | 24 | @media (max-width: 768px) { 25 | .title { 26 | font-size: 20px; 27 | padding: 12px 40px; 28 | } 29 | .linkGithub { 30 | margin-top: 19px; 31 | margin-right: 3px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/Header/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import { faGithub } from "@fortawesome/free-brands-svg-icons"; 4 | import styles from "./index.module.css"; 5 | 6 | const Header = () => { 7 | return ( 8 |

9 |

10 | 16 | View on Github 17 | 18 |

19 | ); 20 | }; 21 | 22 | export default Header; 23 | -------------------------------------------------------------------------------- /src/components/FlexboxSimulatorBackground/Spaceman/Spaceman.jsx: -------------------------------------------------------------------------------- 1 | import { useGLTF } from "@react-three/drei"; 2 | import { useRef } from "react"; 3 | 4 | const Spaceman = (props) => { 5 | const spacemanRef = useRef(); 6 | const { nodes, materials } = useGLTF( 7 | "/css-flexbox-simulator/models/astronaut.glb" 8 | ); 9 | 10 | return ( 11 | <> 12 | {}} 21 | /> 22 | 23 | ); 24 | }; 25 | 26 | export default Spaceman; 27 | useGLTF.preload("/css-flexbox-simulator/models/astronaut.glb"); 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./src/*"] 19 | } 20 | }, 21 | "include": [ 22 | "next-env.d.ts", 23 | "**/*.ts", 24 | "**/*.tsx", 25 | "src/Components/FlexboxActionModal/index.jsx", 26 | "src/Components/FlexboxAction/index.jsx" 27 | ], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /src/components/FlexboxActionModal/index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | font-size: 15px; 3 | } 4 | .header { 5 | width: 100%; 6 | min-width: 300px; 7 | border-bottom: 1px solid gray; 8 | font-size: 22px; 9 | text-align: center; 10 | padding: 5px; 11 | font-weight: bolder; 12 | } 13 | 14 | .content { 15 | padding: 30px 25px; 16 | } 17 | 18 | .actionClose { 19 | position: absolute; 20 | display: block; 21 | padding: 2px 5px; 22 | line-height: 20px; 23 | right: -10px; 24 | top: -10px; 25 | font-size: 24px; 26 | background: #ffffff; 27 | border-radius: 18px; 28 | border: 1px solid #cfcece; 29 | } 30 | 31 | .globalDescription { 32 | margin-bottom: 15px; 33 | } 34 | 35 | .globalDescription .values { 36 | margin-top: 5px; 37 | } 38 | 39 | .globalDescription .values .value { 40 | font-weight: bolder; 41 | } 42 | 43 | .modalTriggerIcon { 44 | cursor: pointer; 45 | display: inline-block; 46 | } 47 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | color: #000000; 7 | background: #ffffff; 8 | box-sizing: border-box; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | 16 | .popup-content { 17 | min-width: 300px; 18 | background-color: #ffffff; 19 | } 20 | 21 | .content-layout { 22 | display: grid; 23 | grid-template-rows: 1fr; 24 | grid-template-columns: 40% 60%; 25 | } 26 | 27 | .flexbox-action-layout { 28 | grid-column: 1 / 2; 29 | overflow-y: scroll; 30 | } 31 | 32 | .flexbox-simulator-layout { 33 | grid-column-start: 2; 34 | overflow: auto; 35 | position: relative; 36 | } 37 | 38 | .footer-layout { 39 | grid-template-rows: 1fr; 40 | } 41 | 42 | @media (max-width: 768px) { 43 | .content-layout { 44 | grid-template-columns: 50% 50%; 45 | } 46 | } 47 | @media (max-width: 500) { 48 | .content-layout { 49 | grid-template-columns: 60% 40%; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/FlexboxSimulator/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-key */ 2 | 3 | import React from "react"; 4 | 5 | const FlexboxSimulator = ({ itemsQuantity, values }) => { 6 | return ( 7 |

8 |

18 | {Array.apply(null, { length: itemsQuantity }).map((e, index) => { 19 | return ( 20 |

24 | {index + 1} 25 |

26 | ); 27 | })} 28 |

29 |

30 | ); 31 | }; 32 | 33 | export default FlexboxSimulator; 34 | -------------------------------------------------------------------------------- /src/components/FlexboxSimulatorBackground/Earth/Earth.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { useGLTF } from "@react-three/drei"; 3 | import * as THREE from "three"; 4 | import { useFrame } from "@react-three/fiber"; 5 | 6 | export default function Model(props) { 7 | const earthRef = useRef(); 8 | 9 | const { nodes, materials } = useGLTF("/css-flexbox-simulator/models/earth.glb"); 10 | useFrame(({ clock }) => { 11 | const t = clock.getElapsedTime(); 12 | earthRef.current.rotation.y = t / 30; 13 | }); 14 | return ( 15 | 16 | 21 | 22 | 23 | 31 | 32 | 33 | ); 34 | } 35 | 36 | useGLTF.preload("/css-flexbox-simulator/models/earth.glb"); 37 | -------------------------------------------------------------------------------- /src/components/FlexboxAction/index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | width: 100%; 4 | padding: 10px 20px; 5 | box-sizing: border-box; 6 | @media (max-width: 768px) { 7 | padding: 5px 5px; 8 | } 9 | } 10 | 11 | .section { 12 | margin-top: 20px; 13 | position: relative; 14 | } 15 | 16 | .header { 17 | display: flex; 18 | flex-wrap: wrap; 19 | } 20 | 21 | .header .title { 22 | font-size: 20px; 23 | font-weight: 700; 24 | flex-grow: 1; 25 | } 26 | 27 | .header .buttonAdd { 28 | background-color: green; 29 | font-size: 16px; 30 | padding: 10px; 31 | text-align: center; 32 | color: white; 33 | cursor: pointer; 34 | width: 20px; 35 | box-sizing: content-box; 36 | } 37 | 38 | .header .buttonRemove { 39 | font-size: 16px; 40 | padding: 10px; 41 | text-align: center; 42 | color: white; 43 | cursor: pointer; 44 | width: 20px; 45 | background-color: red; 46 | margin-right: 10px; 47 | box-sizing: content-box; 48 | } 49 | 50 | .sectionItem { 51 | margin: 15px 0px; 52 | padding-top: 20px; 53 | } 54 | .sectionItem:not(:first-child) { 55 | border-top: 1px dashed black; 56 | } 57 | .sectionItem .title { 58 | font-weight: 700; 59 | } 60 | .sectionItem .options { 61 | margin-top: 10px; 62 | } 63 | -------------------------------------------------------------------------------- /src/components/Footer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 | import { faTwitter, faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons'; 4 | import styles from './index.module.css'; 5 | 6 | const Footer = () => { 7 | return ( 8 |

9 |

10 | 11 | Julián Scialabba 12 | 13 |

14 |

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 |

26 | ); 27 | }; 28 | 29 | export default Footer; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flexbox-simulator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@fortawesome/fontawesome-svg-core": "^6.4.0", 13 | "@fortawesome/free-brands-svg-icons": "^6.4.0", 14 | "@fortawesome/free-solid-svg-icons": "^6.4.0", 15 | "@fortawesome/react-fontawesome": "^0.2.0", 16 | "@react-three/drei": "^9.61.3", 17 | "@react-three/fiber": "^8.13.0", 18 | "@react-three/postprocessing": "^2.10.0", 19 | "@types/node": "20.1.4", 20 | "@types/react": "^18.2.6", 21 | "@types/react-dom": "^18.2.4", 22 | "@types/three": "^0.152.0", 23 | "autoprefixer": "10.4.14", 24 | "eslint": "8.40.0", 25 | "eslint-config-next": "13.4.2", 26 | "jss": "^10.10.0", 27 | "next": "13.4.2", 28 | "nextjs-google-analytics": "^2.3.3", 29 | "postcss": "8.4.23", 30 | "react": "18.2.0", 31 | "react-dom": "18.2.0", 32 | "react-fontawesome": "^1.7.1", 33 | "reactjs-popup": "^2.0.5", 34 | "styled-components": "^6.0.0-rc.1", 35 | "tailwindcss": "3.3.2", 36 | "three": "^0.150.1", 37 | "typescript": "5.0.4" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/FlexboxSimulatorBackground/FlexboxSimulatorBackground.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Canvas } from "@react-three/fiber"; 3 | import { Float, OrbitControls, Stars } from "@react-three/drei"; 4 | import Spaceman from "./Spaceman/Spaceman"; 5 | import Sun from "./Sun/Sun"; 6 | import Earth from "./Earth/Earth"; 7 | import { Bloom, EffectComposer } from "@react-three/postprocessing"; 8 | 9 | const FlexboxSimulatorBackground = () => { 10 | return ( 11 |

34 | ); 35 | }; 36 | 37 | export default FlexboxSimulatorBackground; 38 | -------------------------------------------------------------------------------- /src/components/FlexboxActionModal/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-key */ 2 | 3 | import React from "react"; 4 | import Popup from "reactjs-popup"; 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 6 | import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons"; 7 | import styles from "./index.module.css"; 8 | 9 | const modalTriggerIcon = ( 10 |

11 | 12 |

13 | ); 14 | 15 | const FlexboxActionModal = ({ title, description }) => { 16 | return ( 17 | 18 | {(close) => ( 19 |

20 |

21 | {" "} 22 | {" "} 23 |

24 |

{title}

25 |

26 |

32 |

33 | {description.valuesDescription.map( 34 | (valueDescription, indexValue) => { 35 | return ( 36 |

37 |

{valueDescription.id}:

38 |

43 |

44 | ); 45 | } 46 | )} 47 |

48 |

49 |

50 | )} 51 | 52 | ); 53 | }; 54 | 55 | export default FlexboxActionModal; 56 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import FlexboxSimulatorBackground from "@/components/FlexboxSimulatorBackground/FlexboxSimulatorBackground"; 2 | import React, { Suspense, useState } from "react"; 3 | import Header from "@/components/Header"; 4 | import Footer from "@/components/Footer"; 5 | import FlexboxAction from "@/components/FlexboxAction"; 6 | import FlexboxSimulator from "@/components/FlexboxSimulator"; 7 | import Head from "next/head"; 8 | 9 | export const initialSimulatorData = { 10 | justifyContent: "flex-start", 11 | alignItems: "stretch", 12 | flexDirection: "row", 13 | flexWrap: "nowrap", 14 | alignContent: "stretch", 15 | }; 16 | 17 | export default function Home() { 18 | const [itemsQuantity, setItemsQuantity] = useState(3); 19 | const [simulatorData, setSimulatorData] = useState(initialSimulatorData); 20 | 21 | const updateSimulatorData = async (toUpdate: any) => { 22 | setSimulatorData(toUpdate); 23 | }; 24 | 25 | const removeItem = () => { 26 | if (itemsQuantity > 1) { 27 | setItemsQuantity(itemsQuantity - 1); 28 | } 29 | }; 30 | 31 | const addItem = () => { 32 | if (itemsQuantity < 20) { 33 | setItemsQuantity(itemsQuantity + 1); 34 | } 35 | }; 36 | 37 | return ( 38 | <> 39 | 40 | CSS Flexbox Simulator 41 | 42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 | 55 |

56 |

57 | 61 | 62 |

63 |

64 |

65 |

67 |

68 |

69 | 70 | ); 71 | } 72 | 73 | export async function getStaticProps() { 74 | return { 75 | props: {}, 76 | }; 77 | } 78 | -------------------------------------------------------------------------------- /src/components/FlexboxAction/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-key */ 2 | import React from "react"; 3 | import flexboxActionItemsData from "./itemsData.json"; 4 | import styles from "./index.module.css"; 5 | import FlexboxActionModal from "../FlexboxActionModal"; 6 | 7 | const FlexboxAction = ({ 8 | updateValues, 9 | removeItem, 10 | addItem, 11 | simulatorData, 12 | }) => { 13 | const onChangeOption = (style, value) => { 14 | updateValues({ 15 | ...simulatorData, 16 | [style]: value, 17 | }); 18 | }; 19 | return ( 20 |

21 |

22 |

23 |

Container Properties

24 |

25 | - 26 |

27 |

28 | + 29 |

30 |

31 |

32 | {flexboxActionItemsData.map((flexboxActionItemData, index) => { 33 | return ( 34 |

35 |

36 | {flexboxActionItemData.title}:{" "} 37 | 41 |

42 |

43 | {flexboxActionItemData.values.map((optionValue) => { 44 | return ( 45 |

46 | 53 | onChangeOption( 54 | flexboxActionItemData.id, 55 | event.target.value 56 | ) 57 | } 58 | /> 59 | 62 | {optionValue} 63 | 64 |

65 | ); 66 | })} 67 |

68 |

69 | ); 70 | })} 71 |

72 |

73 |

74 | ); 75 | }; 76 | 77 | export default FlexboxAction; 78 | -------------------------------------------------------------------------------- /.github/workflows/nextjs.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages 2 | # 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started 4 | # 5 | name: Deploy Next.js site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: ["master"] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 23 | concurrency: 24 | group: "pages" 25 | cancel-in-progress: false 26 | 27 | jobs: 28 | # Build job 29 | build: 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Detect package manager 35 | id: detect-package-manager 36 | run: | 37 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 38 | echo "manager=yarn" >> $GITHUB_OUTPUT 39 | echo "command=install" >> $GITHUB_OUTPUT 40 | echo "runner=yarn" >> $GITHUB_OUTPUT 41 | exit 0 42 | elif [ -f "${{ github.workspace }}/package.json" ]; then 43 | echo "manager=npm" >> $GITHUB_OUTPUT 44 | echo "command=ci" >> $GITHUB_OUTPUT 45 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT 46 | exit 0 47 | else 48 | echo "Unable to determine package manager" 49 | exit 1 50 | fi 51 | - name: Setup Node 52 | uses: actions/setup-node@v3 53 | with: 54 | node-version: "16" 55 | cache: ${{ steps.detect-package-manager.outputs.manager }} 56 | - name: Setup Pages 57 | uses: actions/configure-pages@v3 58 | with: 59 | # Automatically inject basePath in your Next.js configuration file and disable 60 | # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). 61 | # 62 | # You may remove this line if you want to manage the configuration yourself. 63 | static_site_generator: next 64 | - name: Restore cache 65 | uses: actions/cache@v3 66 | with: 67 | path: | 68 | .next/cache 69 | # Generate a new cache whenever packages or source files change. 70 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} 71 | # If source files changed but packages didn't, rebuild from a prior cache. 72 | restore-keys: | 73 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- 74 | - name: Install dependencies 75 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 76 | - name: Build with Next.js 77 | run: ${{ steps.detect-package-manager.outputs.runner }} next build 78 | - name: Static HTML export with Next.js 79 | run: ${{ steps.detect-package-manager.outputs.runner }} next export 80 | - name: Upload artifact 81 | uses: actions/upload-pages-artifact@v1 82 | with: 83 | path: ./out 84 | 85 | # Deployment job 86 | deploy: 87 | environment: 88 | name: github-pages 89 | url: ${{ steps.deployment.outputs.page_url }} 90 | runs-on: ubuntu-latest 91 | needs: build 92 | steps: 93 | - name: Deploy to GitHub Pages 94 | id: deployment 95 | uses: actions/deploy-pages@v2 96 | -------------------------------------------------------------------------------- /src/components/FlexboxAction/itemsData.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "justifyContent", 4 | "title": "Justify Content", 5 | "values": ["flex-start", "flex-end", "center", "space-between", "space-around"], 6 | "documentation":{ 7 | "globalDescription": "The justify-content property is used to align the flex items.", 8 | "valuesDescription": [ 9 | { 10 | "id": "flex-start", 11 | "description": "The flex-start value aligns the flex items at the beginning of the container. This is default." 12 | }, 13 | { 14 | "id": "flex-end", 15 | "description": "The flex-end value aligns the flex items at the end of the container." 16 | }, 17 | { 18 | "id": "center", 19 | "description": "The center value aligns the flex items at the center of the container." 20 | }, 21 | { 22 | "id": "space-between", 23 | "description": "The space-between value displays the flex items with space between the lines." 24 | }, 25 | { 26 | "id": "space-around", 27 | "description": "The space-around value displays the flex items with space before, between, and after the lines." 28 | } 29 | ] 30 | } 31 | }, 32 | { 33 | "id": "flexWrap", 34 | "title": "Flex Wrap", 35 | "values": ["nowrap", "wrap", "wrap-reverse"], 36 | "documentation":{ 37 | "globalDescription": "The flex-wrap property specifies whether the flex items should wrap or not.", 38 | "valuesDescription": [ 39 | { 40 | "id": "nowrap", 41 | "description": "The nowrap value specifies that the flex items will not wrap. This is default." 42 | }, 43 | { 44 | "id": "wrap", 45 | "description": "The wrap value specifies that the flex items will wrap if necessary." 46 | }, 47 | { 48 | "id": "wrap-reverse", 49 | "description": "The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order." 50 | } 51 | ] 52 | } 53 | }, 54 | { 55 | "id": "alignItems", 56 | "title": "Align Items", 57 | "values": ["stretch", "flex-start", "flex-end", "center", "baseline"], 58 | "documentation":{ 59 | "globalDescription": "The align-items property is used to align the flex items vertically.", 60 | "valuesDescription": [ 61 | { 62 | "id": "stretch", 63 | "description": "The stretch value stretches the flex items to fill the container. This is default." 64 | }, 65 | { 66 | "id": "flex-start", 67 | "description": "The flex-start value aligns the flex items at the top of the container." 68 | }, 69 | { 70 | "id": "flex-end", 71 | "description": "The flex-end value aligns the flex items at the bottom of the container." 72 | }, 73 | { 74 | "id": "center", 75 | "description": "The center value aligns the flex items in the middle of the container." 76 | }, 77 | { 78 | "id": "baseline", 79 | "description": "The baseline value aligns the flex items such as their baselines aligns." 80 | } 81 | ] 82 | } 83 | }, 84 | { 85 | "id": "flexDirection", 86 | "title": "Flex Direction", 87 | "values": ["row", "row-reverse", "column", "column-reverse"], 88 | "documentation":{ 89 | "globalDescription": "The flex-direction property defines in which direction the container wants to stack the flex items.", 90 | "valuesDescription": [ 91 | { 92 | "id": "row", 93 | "description": "The row value stacks the flex items horizontally (from left to right). This is the default." 94 | }, 95 | { 96 | "id": "row-reverse", 97 | "description": "The row-reverse value stacks the flex items horizontally (but from right to left)." 98 | }, 99 | { 100 | "id": "column", 101 | "description": "The column value stacks the flex items vertically (from top to bottom)." 102 | }, 103 | { 104 | "id": "column-reverse", 105 | "description": "The column-reverse value stacks the flex items vertically (but from bottom to top)." 106 | } 107 | ] 108 | } 109 | }, 110 | { 111 | "id": "alignContent", 112 | "title": "Align Content", 113 | "values": ["stretch", "flex-start", "flex-end", "center", "space-between", "space-around"], 114 | "documentation":{ 115 | "globalDescription": "The align-content property is used to align the flex lines.", 116 | "valuesDescription": [ 117 | { 118 | "id": "stretch", 119 | "description": "The stretch value stretches the flex lines to take up the remaining space. This is default." 120 | }, 121 | { 122 | "id": "flex-start", 123 | "description": "The flex-start value displays the flex lines at the start of the container." 124 | }, 125 | { 126 | "id": "flex-end", 127 | "description": "The flex-end value displays the flex lines at the end of the container." 128 | }, 129 | { 130 | "id": "center", 131 | "description": "The center value displays display the flex lines in the middle of the container." 132 | }, 133 | { 134 | "id": "space-between", 135 | "description": "The space-between value displays the flex lines with equal space between them." 136 | }, 137 | { 138 | "id": "space-around", 139 | "description": "The space-around value displays the flex lines with space before, between, and after them." 140 | } 141 | ] 142 | } 143 | } 144 | ] --------------------------------------------------------------------------------