javascript - How to let DOM elements stack and overflow horizontally instead of vertically in HTML? -


do need container wide , set elements inline display or float or something? if have 2 rows, each taking 50% height?

what if number of elements undetermined? how determine container width?

it seems hard div. have use table?

also, seems hard in pure css, it's confusing , hard control relative width , height @ same time. have use js?

what easiest , elegant way of doing this?

sounds want use css attribute: flexbox

with flex box, can define max , min width , height , max/min number of elements before fall onto new line.

the beauty of is, let browser calculate widths, define max, min, margins , padding.

and css, no javascript required

take @ examples @ css tricks , have play it. link relatively old of vendor prefixes may not needed more.

hope helps!

edit: additional info on flex attribute can found @ mozilla


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -