\n \n

Responsive Flex Layout

Intro

\n This project is a template for creating a web page based on a wrapping\n flexbox layout. This technique is an easy way to make web pages that\n scale nicely to different screen sizes without having cluttered and\n complex CSS.\n

Structure

\n In the HTML, notice that all of the main content is inside the flex-container div. This acts as the container for most or all\n content. Even headers, footers, and main logos can go into this\n container.\n

\n Inside the flex-container div are multiple flex-item\n divs. Each of these acts as a smaller container for one item on the\n page. An item can be a main image, navigation bar, photo with caption,\n chunk of text, etc. Think of an item as a block of the page that you\n want to keep together even if the overall layout changes.\n

Styling

\n Currently, there is only minimal styling for testing on this page.\n There is no flex styling. That's up to you!\n

\n Use display: flex; and flex-wrap: wrap; on\n your container.\n
\n Set the flex-item width in pixels for initial testing. Later, it\n will be better to set this as a percent.\n
\n Set the flex-item padding to create internal blank space and give\n each flex-item more depth.\n
\n Use a media query to set a different flex-item width for smaller\n screens.\n
\n This demo is especially helpful.\n

\n \n",18,["D",1770393299947],"branchVersion","label",[18],"pulls","branches","forks","envVars",{"_320":26,"_322":26},"connections",{"_320":26,"_321":26},"count","unfilledCount","emptyCount",{"_50":305,"_13":18,"_82":83,"_60":-5,"_52":53,"_310":217,"_330":236,"_54":352,"_56":308,"_84":21,"_306":307,"_85":24,"_311":-5,"_334":353,"_17":354},{"_50":345,"_13":346,"_82":234,"_60":-5,"_52":53,"_310":57,"_330":236,"_54":347,"_56":26,"_84":348,"_306":349,"_85":24,"_311":-5,"_334":350,"_17":351},{"_50":337,"_13":338,"_82":339,"_60":-5,"_52":53,"_310":57,"_330":236,"_54":340,"_56":26,"_84":341,"_306":342,"_85":24,"_311":-5,"_334":343,"_17":344},{"_50":327,"_13":328,"_82":329,"_60":-5,"_52":53,"_310":259,"_330":236,"_54":331,"_56":332,"_84":21,"_306":333,"_85":24,"_311":-5,"_334":335,"_17":336},"7608fcee-08ef-11f1-87eb-42dde27851f2","style.css","019c337b-fcc2-72d5-92c3-6e16c8e034f0","latest",["D",1770995999549],146,":root {\n --background-color: #1B2021; /*Carbon Black*/\n --main-color: #51513D; /*Ebony*/\n --midtone1: #A6A867; /*Palm Leaf*/\n --midtone2: #E3DC95; /*Vanilla Custard*/\n --midtone3: #E3DCC2; /*Sand Dune*/\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n background-color: var(--background-color);\n color: var(--midtone3);\n \n}\n\n@media (max-width: 600px) {\n .col-4 {\n flex:100vw;\n }\n .col-3 {\n flex: : 75vw;\n }\n .col-2 {\n flex: :50vw;\n }\n .col-1 {\n flex: :25vw;\n }\n}\n\n.flex-container {\n display: flex;\n flex-wrap: wrap;\n border: 2x solid red;\n background-color: var(--background-color);\n}\n\n.flex-item {\n border: 3px solid gold;\n width: 50vw;\n padding: 5vw;\n h2, h1, h3 {\n text-align: center;\n background-color: var(--main-color);\n }\n \n}\n\n.col-4 {\n flex: 99vw;\n}\n\n.col-3 {\n flex: 75vw;\n}\n\n.col-2 {\n flex: 50vw;\n}\n\n.col-1 {\n flex: 25vw;\n}\n\n\n.navbar {\n flex: 99vw;\n list-style-type: none;\n padding: 0.5vw;\n overflow: hidden;\n background-color: #e6dddc;\n background-color: var(--midtone1);\n\na {\n margin: 3vw;\n color: #e6dddc;\n font-family: EB Garamond, EB Garamond;\n}\n\nli a {\n display: block;\n float: left;\n text-align: center;\n margin: 0;\n width:100%;\n padding: 2vw;\n color: #94532e;\n text-decoration: none;\n text-shadow: 0 0 15px;\n transition:\n color 0.3s ease,\n background-color 0.3s ease;\n}\n\nli a:hover {\n background-color: #646935;\n color: #2e9447;\n}\n}","children",[],[328],"2ec4266a-036d-11f1-9aa2-42dde27851f2","script.js","019c337b-fcc2-72d5-92c3-6b66d89d20eb",["D",1770390289561],"script","",[],[338],"2ec42052-036d-11f1-9aa2-42dde27851f2","main.ts",["D",1770390289561],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[346],["D",1770393299947],[],[18],["D",1770390289561],{"_11":12,"_273":88},{"_11":12,"_269":-5,"_87":88,"_30":86,"_270":271,"_272":24},{"_56":259,"_13":16,"_50":53,"_260":224,"_261":80,"_262":57,"_263":228,"_264":265,"_266":59,"_267":14,"_268":12},"ctx",{"_69":-5,"_294":392,"_393":394,"_395":396,"_397":24,"_398":24,"_399":24,"_400":236,"_401":-5,"_402":-7,"_403":-7,"_404":26,"_405":24,"_406":24,"_407":-5,"_408":24,"_409":24,"_410":24,"_411":-5},"ENV",{"_363":364,"_365":366,"_367":16,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html