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 on this page to show the\n borders of each div. 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 Use classes to create a set of different widths for flex-items. One\n common way to do this is to create flex-items having widths of 1/3\n screen width, 2/3 screen width, and full screen width. Or try\n quarters or fifths instead of thirds.\n
\n Set the flex-item width in pixels for initial testing. Later, it\n will be better to set this as a percentage of screen width.\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",[177],"pulls","branches","forks",5,"envVars",{"_74":77,"_192":77},"connections",{"_74":77,"_191":77},"unfilledCount","emptyCount",{"_27":176,"_13":177,"_66":178,"_36":-5,"_29":30,"_157":115,"_159":92,"_31":207,"_33":180,"_69":47,"_162":181,"_70":24,"_164":-5,"_198":208,"_130":209},{"_27":172,"_13":79,"_66":78,"_36":-5,"_29":30,"_157":20,"_159":92,"_31":204,"_33":77,"_69":80,"_162":174,"_70":24,"_164":14,"_198":205,"_130":206},{"_27":166,"_13":167,"_66":168,"_36":-5,"_29":30,"_157":20,"_159":92,"_31":201,"_33":77,"_69":170,"_162":131,"_70":24,"_164":-5,"_198":202,"_130":203},{"_27":156,"_13":68,"_66":67,"_36":-5,"_29":30,"_157":158,"_159":92,"_31":197,"_33":161,"_69":47,"_162":163,"_70":24,"_164":-5,"_198":199,"_130":200},["D",1770258764442],"children",[],[68],["D",1770256207664],[],[167],["D",1770256207664],[],[79],["D",1775079721464],[],[177],["D",1770256207664],{"_11":12,"_129":73},{"_11":12,"_124":125,"_72":73,"_25":71,"_126":127,"_128":24},{"_33":115,"_13":16,"_27":30,"_116":81,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_45":-5,"_149":247,"_248":249,"_250":251,"_252":24,"_253":24,"_254":24,"_255":92,"_256":-5,"_257":-7,"_258":-7,"_259":77,"_260":24,"_261":24,"_262":-5,"_263":24,"_264":24,"_265":24,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":16,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"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