It’s recommended that any web developer should possess a strong foundation of the basics i.e. JavaScript, HTML, CSS, before moving to the framework. Dig deep to acquire more knowledge. In CSS, make sure you know the display, colors, margins, borders, backgrounds, linear-gradient, etc. Among the most popular CSS frameworks are tailwind CSS, bootstrap, and material UI.
The display is one of the daily used CSS functionalities. It helps to arrange items on a page in a recommended manner. Whether you want them to be vertical or horizontal, then the display has all the properties needed. Most people tend to degrade the power of CSS, but a single display property can mess up your entire design.
Display Flex
Flexbox is manor containers where you might want your product or content to go. If you have many items, arranging them vertically might take great space. Display flex is used to arrange your content in a horizontal way. Your content-items will align themselves in a single row from the left towards the right hand.
Flex-wrap:wrap
This is another hack that I recently learned. It must be used with display-flex property. The wrap method will make sure that if the items are fully in one row, it automatically starts another row. Try out the display flex without and with this functionality and see the results. But if you want to hide excess items rather than move to the next row, don’t apply this. Also remember, overflow: hidden is used to hide items found outside the window media.
Display Block
This acts like div functionality. Your items get arranged vertically. It’s the default of each editor while creating items. This property is good while making your site responsive on the phone. If you have large items, then opt for the block method. It makes your content appear spacious.
Display inline
The hack outputs your content in a single row. Any modification to the height or width of your item may not affect the display. In most cases, I usually avoid this property. It’s like the constant in JavaScript.
We still have other display properties like flex-grid, grid, inline-block. But the above described are the most commonly used. Master them and let them be in your toolbox.
Top comments (0)