\n \n

Flex Layout Template

\n\n

\n \n

Introduction

\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

\n\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

\n The first div contains a navigation bar with links. This nav bar is structured as an unordered list, with each link being both a list item and a link with href.\n

\n \n

Styling

\n The key CSS statements for this page are split among the container, the items, and some custom rules for creating column widths.\n

\n In flexbox-container:\n

\n display: flex; to tell the browser to use flex layout rules\n
\n flex-wrap: wrap; to set the behavior that flex items will fill a row, then wrap to another row\n

In flexbox-item:

\n padding: 1em; for internal whitespacw in each flex-item box, with units relative to text size. \n
\n text-align: center; on headings. Other styles can be added to headings, paragraphs, images, as needed. \n
\n Custom utility classes to set column width. This page uses a 3-column layout, so there are three utility classes. For example:\n .one-third { flex: 33%;} to set the flex width of any item in this class to 33% of the screen width.\n

\n The page also makes use of CSS custom properties (usually called variables) to set an overall color scheme that can be easily edited.\n

\n\n

\n \n

\n \n",[],[190],{"_104":199,"_97":200,"_164":117,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":202,"_101":33,"_172":203,"_174":204,"_175":22,"_176":98,"_177":205,"_100":206},"2833a366-036d-11f1-8f16-42dde27851f2","main.ts",1,["D",1770390278509],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[200],{"_104":208,"_97":209,"_164":210,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":211,"_101":33,"_172":212,"_174":74,"_175":22,"_176":-5,"_177":213,"_100":214},"2833aa78-036d-11f1-8f16-42dde27851f2","script.js","019c337b-d1b3-7580-8c99-841d26f02688",["D",1770390278509],"script",[],[209],{"_104":216,"_97":217,"_164":218,"_166":-5,"_167":146,"_168":219,"_169":119,"_106":220,"_101":221,"_172":173,"_174":222,"_175":22,"_176":-5,"_177":223,"_100":224},"6be3aa8c-06d0-11f1-a783-42dde27851f2","style.css","019c337b-d1b3-7580-8c99-8aafd93d47a6",252,["D",1770762765808],221,":root {\n --background-color: #eeeeee; /* platinum */\n --main-color: #326273; /* blue slate */\n --midtone1: #5c9ead; /* pacific blue */\n --midtone2: #cd5334; /* rosy copper */\n --midtone3: #e39774; /* tangerine dream */\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n color: var(--main-color);\n}\n\nbody {\n background-color: var(--background-color);\n margin-left: 1vw;\n margin-right: 1vw;\n font-family: \"Lato\", sans-serif;\n}\n\nh1 {\n margin: 1em;\n color: var(--midtone2);\n text-align: center;\n font-weight: 900;\n}\n\nh2, h3 {\n margin: 1em 1em 0em;\n text-align: center;\n color: var(--midtone2);\n}\n\np {\n margin: 1em;\n color: var(--main-color);\n font-weight: 400;\n}\n\nhr {\n width: 90%;\n margin: 1em;\n border: 0.2em solid var(--midtone1);\n border-radius: 0.1em;\n}\n\n.flex-container {\n display: flex;\n flex-wrap: wrap;\n gap: 1vw;\n justify-content: center;\n}\n\n.flex-item {\n border-radius: 0.5em;\n background-color: white;\n box-shadow: 0.2vw 0.2vw 0.5vw #22222244;\n}\n\n.to-edge {\n width: 100vw;\n margin-left: -1vw;\n margin-rightt: -1vw;\n}\n\n.full {\n width: 90vw;\n}\n\n.two-thirds {\n width: 60vw;\n}\n\n.one-third {\n width: 30vw;\n}\n\n@media (max-width: 600px) {\n .full {\n flex: 96vw;\n }\n \n .two-thirds {\n flex: 96%;\n }\n .one-third{\n flex: 45%;\n }\n}\n\n.navbar {\n overflow: hidden;\n list-style-type: none;\n background-color: var(--main-color);\n\n li {\n float: left;\n }\n\n li a {\n display: block;\n padding: 0.5em 2em;\n text-align: center;\n text-decoration: none;\n font-size: 1.2em;\n background-color: var(--main-color);\n color: var(--background-color);\n }\n\n li a:hover {\n background-color: var(--midtone3);\n }\n}",[],[217],"files",[161,180,188,198,207,215],"counts",{"_229":33,"_230":201,"_231":33,"_232":233,"_236":237},"pulls","branches","forks","envVars",{"_234":33,"_235":33},"count","emptyCount","connections",{"_234":33,"_238":33},"unfilledCount","contents",[241,244,247,250,253,256],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":145,"_169":119,"_106":242,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_100":243},["D",1771341242549],[163],{"_104":181,"_97":182,"_164":183,"_166":-5,"_167":146,"_168":184,"_169":119,"_106":245,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_100":246},["D",1771341196441],[182],{"_104":189,"_97":190,"_164":191,"_166":-5,"_167":146,"_168":192,"_169":119,"_106":248,"_101":194,"_172":173,"_174":195,"_175":22,"_176":-5,"_100":249},["D",1770783893332],[190],{"_104":199,"_97":200,"_164":117,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":251,"_101":33,"_172":203,"_174":204,"_175":22,"_176":98,"_100":252},["D",1770390278509],[200],{"_104":208,"_97":209,"_164":210,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":254,"_101":33,"_172":212,"_174":74,"_175":22,"_176":-5,"_100":255},["D",1770390278509],[209],{"_104":216,"_97":217,"_164":218,"_166":-5,"_167":146,"_168":219,"_169":119,"_106":257,"_101":221,"_172":173,"_174":222,"_175":22,"_176":-5,"_100":258},["D",1770762765808],[217],"upstreamProject",{"_104":154,"_97":261,"_112":113,"_114":-5,"_110":111,"_23":262},"responsive-flex-template",{"_95":96,"_136":137},"upstreamBranch",{"_104":149,"_106":265,"_266":267,"_97":45,"_147":154,"_101":151,"_148":-5,"_150":-5,"_268":269,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":261},["D",1770256207664],"updatedAt",["D",1770259154658],"lockfileKey","1770259181238-esm.town_v_ceculbe_responsive-flex-template@26-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_95":96,"_97":98,"_99":-7,"_101":-7,"_102":276,"_239":281,"_294":-7,"_295":296,"_299":-5,"_225":300,"_319":310,"_320":321,"_322":33,"_323":22,"_324":22},{"_104":105,"_97":98,"_106":277,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":278,"_138":279,"_143":280,"_158":22},["D",1770390278509],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":115,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":149,"_150":151,"_152":111,"_153":154,"_155":123,"_156":98,"_157":96},[282,284,286,288,290,292],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":145,"_169":119,"_106":242,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_100":283},[163],{"_104":181,"_97":182,"_164":183,"_166":-5,"_167":146,"_168":184,"_169":119,"_106":245,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_100":285},[182],{"_104":189,"_97":190,"_164":191,"_166":-5,"_167":146,"_168":192,"_169":119,"_106":248,"_101":194,"_172":173,"_174":195,"_175":22,"_176":-5,"_100":287},[190],{"_104":199,"_97":200,"_164":117,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":251,"_101":33,"_172":203,"_174":204,"_175":22,"_176":98,"_100":289},[200],{"_104":208,"_97":209,"_164":210,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":254,"_101":33,"_172":212,"_174":74,"_175":22,"_176":-5,"_100":291},[209],{"_104":216,"_97":217,"_164":218,"_166":-5,"_167":146,"_168":219,"_169":119,"_106":257,"_101":221,"_172":173,"_174":222,"_175":22,"_176":-5,"_100":293},[217],"readme","upstream",{"_104":149,"_106":297,"_266":298,"_97":45,"_147":154,"_101":151,"_148":-5,"_150":-5,"_268":269,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":261},["D",1770256207664],["D",1770259154658],"pull",[301,304,307,310,313,316],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":145,"_169":119,"_106":170,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_177":302,"_100":303},[],[163],{"_104":181,"_97":182,"_164":183,"_166":-5,"_167":146,"_168":184,"_169":119,"_106":185,"_101":171,"_172":173,"_174":74,"_175":22,"_176":-5,"_177":305,"_100":306},[],[182],{"_104":189,"_97":190,"_164":191,"_166":-5,"_167":146,"_168":192,"_169":119,"_106":193,"_101":194,"_172":173,"_174":195,"_175":22,"_176":-5,"_177":308,"_100":309},[],[190],{"_104":199,"_97":200,"_164":117,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":202,"_101":33,"_172":203,"_174":204,"_175":22,"_176":98,"_177":311,"_100":312},[],[200],{"_104":208,"_97":209,"_164":210,"_166":-5,"_167":146,"_168":201,"_169":119,"_106":211,"_101":33,"_172":212,"_174":74,"_175":22,"_176":-5,"_177":314,"_100":315},[],[209],{"_104":216,"_97":217,"_164":218,"_166":-5,"_167":146,"_168":219,"_169":119,"_106":220,"_101":221,"_172":173,"_174":222,"_175":22,"_176":-5,"_177":317,"_100":318},[],[217],"preview","ahead",265,"behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

ceculbe

flexbox-demo