I need some help with flex box shrinking or expanding the content within the same line without wrapping. Basically, I have many div element and each div is 50px length appended to the end tolook like a single big line. The odd milestone marking are added on the top of the line. Also, on the bottom of the line all even number miles are shown. The number of miles shown varies dynamically and comes from the server side. My application gives flexibility to view the pages both in desktop version as well as mobile version. When viewed from smart phones, I need to line to shrink along proportionality with the mile markings.I need help on few things.
- When the page is viewed from desktop, I want to width of each line set to say 50 pixel.
- I don't want the line to stretch or shrink to max or min width of the browser when the page is viewed first time. If there are only 4 miles marking are shown with 4 div boxes, then don't stretch each mile to fit to the entire screen.
- When viewed from the browser in smart phone, if the number of miles cannot be displayed in a single line, then shrink line to shown all in the same line.I tried playing with Combining flex-shrink and flex-basis but no luck. Please help.
What is happening in my code is, when the page is loaded inside a desktop browser, the line expands to maximum width of the browser. I need it to set to width of the each mile marking which is 50px for each mile multiplied by number of miles. If there are only 3 miles, then I don't want it to stretch to the entire width of the screen.
If the number of miles are more than the available screen width, then shrink appropriately.
My code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vertical Align Text Inside Flexbox</title><style> .flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; width: 100%; align-items: flex-start; flex-basis: 0%; justify-content: start; } .flex-item-title { padding: 10px; text-align: left; font-weight: bold; font-family: Verdana, Helvetica, Sans-serif; font-size: 10pt; flex-basis: 100px; display: inline-block; flex: 1 1 auto; } .line_miles_red { padding: 10px; border-top: 3px solid red; height: 7px; font-weight: bold; font-size: 2em; text-align: center; width: 50px; flex: 1 1 auto; } .line_miles_blue { border-top: 3px solid blue; height: 7px; font-weight: bold; font-size: 2em; text-align: center; width: 50px; display: inline-block; flex: 1 1 auto; } .flex-item { padding: 10px; width: 50px; font-family: Verdana, Helvetica, Sans-serif; font-size: 8pt; font-weight: normal; text-align: center; flex: 1 1 auto; } /* .flex1 { flex: 1 1 2em; } .flex2 { flex: 1 1 2em; } */</style></head><body><div style="width: 50px; background-color: orange; height: 5px"></div><br/><div class="flex-container"><div class="flex-item-title">Distance</div><div class="flex-item">1 mile</div><div class="flex-item"></div><div class="flex-item">3 mile</div><div class="flex-item"></div><div class="flex-item">5 mile</div><div class="flex-item"></div><div class="flex-item">7 mile</div><div class="flex-item"></div><div class="flex-item">9 Mile</div><div class="flex-item"></div></div><div class="flex-container"><div class="flex-item-title"> </div><div class="line_miles_blue flex2"></div><div class="line_miles_red flex2"></div><div class="line_miles_blue flex2"></div><div class="line_miles_red flex2"></div><div class="line_miles_blue flex2"></div><div class="line_miles_red flex2"></div><div class="line_miles_blue flex2"></div><div class="line_miles_red flex2"></div><div class="line_miles_blue flex2"></div><div class="line_miles_red flex2"></div></div><div class="flex-container"><div class="flex-item-title">Bottom Row</div><div class="flex-item"></div><div class="flex-item">Mile 2</div><div class="flex-item"></div><div class="flex-item">4 Mile</div><div class="flex-item"></div><div class="flex-item">6 Mile</div><div class="flex-item"></div><div class="flex-item">8 Mile</div><div class="flex-item"></div><div class="flex-item">10 Mile</div></div><br/><br/></body></html>