Joanna Gromadzka's Flexbox Research

Flexbox

Flexbox is a modern page layout module replacing block, inline, table and positioning modes. Using simple code you can control position of elements in container creating well balanced websites in way easier fashion.

According to Ire Aderinokun “learning all of flexbox isn’t so straightforward. There are 12 new properties, each with an average of 4 potential values. It can be a bit overwhelming to jump right in with everything. But you don’t have to start with everything. For a great number of circumstances, I find myself only needing to use 3 properties -

display - This sets the element as an inline or block flexbox container element
justify-content - This controls the horizontal alignment of items within the flex container (If the flex-direction is the default value of row or row-reverse)
align-items - This controls the vertical alignment of items within the flex container (If the flex-direction is the default value of row or row-reverse)”(Aderinokun).

Taylor L. says “ Unfortunately, Flexbox support wasn’t added to Internet Explorer until version 10, leaving older versions – still popular in some corners – out of the Flexbox revolution. This idea didn’t sit well with 10up’er Jonathan Neal, tasked with engineering a beautiful layout for a Fortune 50 forced to contend with supporting older versions. We decided to subsidize his time to see if we could introduce Flexbox support under less-than-ideal browser requirements. The result was Flexibility: a smooth front end experience for older browsers, without compromising our ability to use pioneering layout technology”(Lovett).

“Thankfully there are prefixes that let us control older browsers behaviour. We can’t forget about the order of prefixes and trust me – that is one of the most common mistakes when working with prefixes in CSS. The rule is to use old syntax before the new one so if the browser understands new options, those should be used.”(Joanna N.)

Works Cited:

Aderinokun, Ire. “6 Reasons to Start Using Flexbox.” Bitsofcode, Bitsofcode, 25 Feb. 2016, bitsofco.de/6-reasons-to-start-using-flexbox.

N., Joanna. “Cross-Browser Issues with Flexbox.” Digital and Creative Agency In Birmingham, Midlands - Fastfwd, 9 Jan. 2018, www.fastfwd.com/cross-browser-issues-flexbox/.

Lovett, Taylor. “Flexibility: Flexbox Support for Internet Explorer.” 10up, 10up, 23 Dec. 2015, 10up.com/blog/2015/flexibility-flexbox-ie/.