:root { --flex-background-01: #ebe4e4; --flex-background-02: #d0d8db; --flex-background-03: #ebf0d8; --flex-background-04: skyblue; --flex-background-05: #e7cdbb; --flex-background-06: #1d3f4d; --flex-background-07: #4e84e9; --flex-background-08: #cf9324; } /* Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.*/ main .flexbox-intro { padding: 100px; } main .flexbox-intro p { font-size: 14px; font-family: Lato; line-height: 30px; } [class ^="box-"] { width: 80px; height: 80px; font-size: 48px; border: 2px solid black; background-color: var(--flex-background-07); display: flex; justify-content: center; align-items: center; } [class ^="content-"] { width: 60px; height: 60px; font-size: 24px; border: 2px solid black; background-color: var(--flex-background-08); display: flex; justify-content: center; align-items: center; } /* FLEX DIRECTION */ /* The .container class is the parent and our .box-* classes are our children. */ .flexbox-wrapper:nth-child(1) { width: 100%; height: calc(100vh - 600px); padding: 20px 20px; background-color: var(--flex-background-01); display: flex; justify-content: center; gap: 50px; } .flex-direction:nth-child(1) { width: 20%; background-color: var(--flex-background-04); display: flex; flex-direction: row; gap: 20px; } .flex-direction:nth-child(2) { width: 20%; background-color: var(--flex-background-04); display: flex; flex-direction: column; gap: 10px; } .flex-direction:nth-child(3) { width: 20%; background-color: var(--flex-background-04); display: flex; flex-direction: row-reverse; gap: 20px; } .flex-direction:nth-child(4) { width: 20%; background-color: var(--flex-background-04); display: flex; flex-direction: column-reverse; gap: 10px; } /* FLEX JUSTIFY */ .flexbox-wrapper:nth-child(2) { width: 100%; height: calc(100vh - 750px); padding: 20px 20px; background-color: var(--flex-background-02); display: flex; justify-content: center; gap: 50px; } .flex-justify:nth-child(1) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-start; gap: 20px; } .flex-justify:nth-child(2) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: center; gap: 10px; } .flex-justify:nth-child(3) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-end; gap: 20px; } /* FLEX SPACING */ .flexbox-wrapper:nth-child(3) { width: 100%; height: calc(100vh - 750px); padding: 20px 20px; background-color: var(--flex-background-03); display: flex; justify-content: center; gap: 50px; } .flex-spacing:nth-child(1) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-between; } .flex-spacing:nth-child(2) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-around; } .flex-spacing:nth-child(3) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-evenly; } /* FLEX ALINGING ALONG MAIN AXIS */ .flexbox-wrapper:nth-child(4) { width: 100%; height: calc(100vh - 650px); padding: 20px 20px; background-color: var(--flex-background-05); display: flex; gap: 50px; } .flex-align-mainaxis:nth-child(1) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; } .flex-align-mainaxis:nth-child(2) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .flex-align-mainaxis:nth-child(3) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .flex-align-mainaxis:nth-child(4) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .flex-align-mainaxis:nth-child(5) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; } .flex-align-mainaxis:nth-child(6) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: stretch; flex-wrap: wrap; gap: 10px; } /* FLEX ALINGING ALONG CROSS AXIS */ .flexbox-wrapper:nth-child(5) { width: 100%; height: calc(100vh - 750px); padding: 20px 20px; background-color: var(--flex-background-05); display: flex; gap: 50px; } .flex-align-crossaxis:nth-child(1) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-start; gap: 10px; } .flex-align-crossaxis:nth-child(2) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: flex-end; gap: 10px; } .flex-align-crossaxis:nth-child(3) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: center; gap: 10px; } .flex-align-crossaxis:nth-child(4) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-between; gap: 10px; } .flex-align-crossaxis:nth-child(5) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-around; gap: 10px; } .flex-align-crossaxis:nth-child(6) { width: 20%; background-color: var(--flex-background-04); display: flex; justify-content: space-around; gap: 10px; } /* .box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { width: 100px; height: 100px; border: 2px solid black; background-color: #5981cc; justify-content: center; align-items: center; }*/