The latest articles on DEV Community by Nick Adams (@stegopop). https://dev.to/stegopop https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2736358%2F51ab898d-7044-4506-a09d-972b419c78a7.jpg https://dev.to/stegopop en Nick Adams Mon, 20 Jan 2025 04:28:48 +0000 https://dev.to/stegopop/flexbox-for-dummies-everything-you-need-to-master-any-css-layout-1d81 https://dev.to/stegopop/flexbox-for-dummies-everything-you-need-to-master-any-css-layout-1d81 <p>A quick run through just a couple examples and we can break down the most important flex properties with clear examples to help you level up your web development skills.</p> <p>Here I'll cover the most important properties and their shorthands, and the most common layouts. </p> <p>Learn these and you'll be able to easily nest them together and build just about any layout you want.</p> <p>I cover: the axis and how it works with direction, alignment, gap, order, wrapping, flex basis, grow, and shrink.</p> <p>These properties are covered: </p> <ul> <li>display: flex</li> <li>flex</li> <li>flex-wrap</li> <li>gap</li> <li>flex-basis</li> <li>flex-grow</li> <li>flex-shrink</li> <li>order</li> <li>flex-direction</li> <li>flex-flow</li> <li>justify-content</li> <li>align-items</li> <li>align-content</li> </ul> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/5gL8guOBZ4s"> </iframe> </p> <p>Check out our video and comment if you have any questions!</p> <p>Want a specific webdev tutorial? Comment on the video and <br> subscribe to our channel. We'd love to make valuable content, so feedback and suggestions are extremely appreciated!</p> webdev flexbox css buildinpublic