display: flexdisplay: flexdiv tags to create a wrapper and to create a flexbox containerUse CSS flexbox to create a two-column layout.
You will use id selectors to style your wrapper, banner, sidebar and colophon. You'll use an element selector to style your main. You'll use a class selector for grid container; call it "sidebar-flex".
Put background colors in your body, wrapper, banner, sidebar, main and colophon. You can use whatever colors you like, or you can emulate the screenshots.
Important: you must use the id and class selectors specified above. Do NOT use element selectors except to style the body and main. You will be using an embedded style sheet.
The semantic structural tags are complete, but you will need to add one div tag to each page so that you can create a fixed-width centered layout. It needs to encompass the entire live space from the banner to the colophon (screenshots can help you see this)
You also need to add the proper ids to the layout elements: banner, sidebar, menu, colophon. Our PDF lecture notes have more details about this. These ids let you use id selectors to style the "big picture" layout more easily. Note: we're not styling the menu, but you need to get in the habit of using that id.
The live space in each layout is 1000px.
You need to add a second div to the markup to encompass the sidebar and the main content. This will be your "flexbox." Remember that display: flex works by laying out the child elements of the flexbox container horizontally (if there are too many to fit, they'll wrap to a new line). You will have two children in the grid container: your aside and your main. They will fit horizontally and will not wrap"
By default, the two elements in the flex container will display the width of their contents. To control the width of your sidebar and main, you can do one of two things:
flex property in the sidebar and main. You'll get equal units of the width depending on the total of the numbers you set for flex, and you can set up a gap as well.Sidebar is on the left. This is reflected in the code order, and flex will lay them out in code order by default.
Use percentages on Fish to set the width of the columns (25% and 75% total - equals 100%); your gap will look good at 20px.
Sidebar is on the right. You don't need to change the code order. All you need to do is set the flex-direction: row-reverse to reverse the order.
Use flex to set the width of the columns. If you set the sidebar to flex: 1; and the main to flex: 3; you are creating 4 equal units. Sidebar will be 1/4 the width and main will be 3/4 the width. Gap is the same as Fish page.
You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.