Tag: flex

Pubblicato il

min-height and width with flex

The child element of a flexbox may not obey to the css property min-height. Therefore you should use this code in the parent element: min-height: 100vh.

Otherwise the child element, f.e. the main div of a web page with few content, could end before the end of the page, in an inelegant way.

The width of a child element as well may not work as expected (and as it would do without flex). Therefore you should explicitly state the width of a child element within a flexbox.

Otherwise a web page (with few text, i.g.) could have a width considerably narrower that expected.

Pubblicato il

center divs horizontally

In my website I have three (main) divs: the actually main one and two small laterals ads divs (at left and at right of the main one). I noticed that the lateral divs weren’t at the middle of the free (lateral) space, in big screens.

1. The solution was use the flexbox, with this code in the parent div: 

display:flex; justify-content: space-around;

2. But a problem was the fact that these divs have a position:fixed propriety, that is incompatible with flex.

Therfore I was suggested to use position:sticky instead of position:fixed, and it worked.

3.A last problem was that after this change, clicking anything in my page there was a sort od “dance” of all the element within the window. This was solved creating a parent div of my three (main) divs, so that not body, but this new div is the parent.