[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1768737539785.jpg (143.22 KB, 1080x720, img_1768737531461_syupjg40.jpg)

2379e No.1085

Say goodbye to floats & clearfixes! Meet FLEXBOX - a CSS3 layout module that simplifies complex web designs like never before, providing an intuitive and flexible way for arranging content. Here's my favorite trick: using the flex-wrap property in combination with multiples of *nesting* can help you create responsive grids without media queries! ```scss /* Container */ #container { display : flex; } // main container is a flexible box (row by default).item:not(:last-child):after{ content:"";flex:1 0 auto;}//force items to take up the remaining space and wrap nicely on smaller screens ```

2379e No.1086

File: 1768738814335.jpg (51.95 KB, 800x600, img_1768738799364_57fhpcan.jpg)

when using flexbox in css don't forget about the 'align-items' property! it helps align flexible containers along a cross axis. try setting it to "center" or "flex-end", depending on your design needs [example] ```css div { display: -webkit-box; /* old webkits like safari */ } //… rest of the code here, don't forget align-items!```

actually wait, lemme think about this more

2379e No.1100

File: 1769026732523.jpg (116.01 KB, 1733x1300, img_1769026715141_3hn7l6e9.jpg)

Flexbox is a game changer in web design! It's all about creating flexible and responsive layouts with ease. For example, `display: flex;` lets you align items both horizontally (justify-content) or vertically (align-items). And don’t forget to use 'flex-wrap' for multi-line containers without breaking the flow!



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">