I am following this item to get a handle on a flexbox layout. The idea is to prominently display the current time and temperature in very large font, with an alternate city displayed along the bottom, and forecasts to the right. This gives a rough idea (at least conceptually) of the desired look:
___ __ _ _ ___ / _ \ / / _| || | / _ \ | | | |/ /_(_) || || (_) | | | | | '_ \ |__ _> _ < | |_| | (_) | | || (_) | \___/ \___(_) |_| \___/ 07:00 53F 08:00 53F 09:00 54F _____ __ ______ __ __ _____ 10:00 55F| ____/_ | ____| /_ /_ |/ ____| etc...| |__ | | |__ | || | ||___ \ | | __| | || | | ___) || | | | || | |____|____/ |_|_| |_||_|\_____| PTC 49F 10CWhen completed, this layout will fully fill the client's browser window (the client being basically an embedded clock).
I am trying to do this with flexbox and I have run into difficulty with horizontal alignment. (The actual font used and font sizing will be controlled by javascript using auto-sizing logic.) It seems that none of my efforts to change align-items have any effect on horizontal alignment; the text always ends up aligning to the left (or, technically, flex-start). (I've also tried monkeying with justify-content in case my understanding of axes is confused. Of course, to no avail.) I've tried specifying align-items in each div, in only the top, and also in the subcontainers; there seems to be no effect. I have searched outside of this article too, and haven't found any clue as to what I've done wrong. Can you help me understand my error here?
This is what I have so far in my mockup:
.box { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-evenly; width: 100%; height: 100%;}<div class='box' height:100%><div id='time_temp_container' style='flex-flow: column nowrap;flex-grow: 1; font-size:30pt;align-items:center;'><div id='time' name='time' style='font-size:85pt;'> 07:58</div> <!-- time --><div id='temp' name='temp' style='font-size:70pt;'> 47F 8C</div> <!-- temp --><div id='city' name='city' style='font-size:40pt;'> SH 20:58 33F 1C</div> <!-- city --></div> <!-- time_temp_container --><div id='extras' name='extras' style='flex_flow: column nowrap;'><div id='icon' name='icon'>icon</div><div>08:00 76F</div><div>09:00 78F</div><div>10:00 80F</div><div>11:00 81F</div><div>12:00 82F</div><div>13:00 82F</div><div>14:00 83F</div><div>15:00 82F</div><div>16:00 83F</div></div> <!-- extras --></div><!-- outer box -->By the way, if you feel my approach could be improved, I'm eager to understand a better approach. I'm not stuck on flexbox; it just sounds to me like a good approach.