float

Posted by & filed under F.

The float property is used for positioning and layout on web pages. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example

Continue reading →

flex-wrap

Posted by & filed under F.

The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. Reminder: the cross axis is

Continue reading →

flex-shrink

Posted by & filed under F.

The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the “flex shrink factor”, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. When omitted, it is set to 1 and

Continue reading →

flex-grow

Posted by & filed under F.

The flex-grow property is a sub-property of the Flexible Box Layout module. IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. For example, if all

Continue reading →