![]() Want to see the full demo? Play around with it in JS Bin. Want to learn more about Flexbox? CSS-Tricks is a great place to start. Now you have an HTML template based on Flexbox. Overflow-y: auto /* adds scroll to this container */ Height: 100% /* allows both columns to span the full height of the browser window */įlex-direction: column /* stacks the left and right headers above the bottom content */įlex-shrink: 0 /* makes sure that content is not cut off in a smaller browser window */įlex-grow: 1 /* ensures that the container will take up the full height of the parent container */ Use this HTML structure as a starting point and add your own content: ĭisplay: flex /* enables flex content for its children */ ![]() Here, the header is within the columns to align the navbar links in the right header with the left edge of the main content container. Note: You could place the header outside the two columns. Enable scrolling within the sidebar and main content containers. The right column contains the page’s main content and the right side of the header. The left column contains the side navigation and the left side of the header. Then, create two columns inside the body that are flexible in width and span the height of the page. The sidebar and main content container scroll independently.įirst, set the height of the html and body containers to 100%. The main content container changes its width based on the width of the sidebar. A flexible main content container (which changes width based on the content of the sidebar).Here's a layout hack using Flexbox for creating your own HTML template with: The main content container also needed to flex to accommodate more (or less) sidebar content. The redesign of the CanJS website required a way to create a fixed header and a fixed flexible sidebar that adjusts its width based on its content.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |