Back in 2012, a two-column layout was added for the top 10 languages on devices with 240px < width ≤ 480px, using a float:left hack. (This was expanded to three columns in 2017 in rWPORe12a299a164723e428efaf95c33ffa52ab52c829.) It’s understandable that float:left was used at the time, since no browsers other than Internet Explorer used to support flexbox yet (and IE also used to support it in v8+ only, and with vendor prefixing). Since 2015, all browsers have supported flexbox without vendor prefixing (the last one to come to the party was Safari), so there’s no reason not to switch to that. It has several benefits:
- Better right-to-left support. If the user requests the site in a right-to-left language such as Hebrew, the <html> element gets a dir="rtl" attribute, but the hardcoded float:left means that the first language appears at the top left, not at the top right as the directionality would request. A flexbox uses the natural text directionality, so the first language will automatically at the top left in LTR languages and at the top right in RTL languages.
- Simplify CSS. Currently there is another rule for width ≤ 240px, which switches to a one-column mode. A flexbox layout would automatically switch to one-column mode if there isn’t enough space, so we could get rid of a breakpoint.
- Bring back two-column mode. On a 241px wide screen, three columns are too many. A flexbox would automatically switch from three-column mode to two-column mode depending on the screen width, before switching to one-column mode.
If someone uses a decade-old browser that doesn’t support flexbox yet (and is able to access our sites somehow), it gracefully degrades to a single-column layout, which should be fine.
Current layout:
| 480px | 242px | 236px |
|---|---|---|


