All geek questions in one place

Flexbox div does not accept full width

I am trying to understand how display:flex works, but whenever I installed it, the children do not take up the entire width. I expected three divs to get 33% of the screen width. What am I doing wrong?

 .flexbox { display: flex; } .flexbox div { border: 1px solid black; padding: 10px; } 
 <div class="flexbox"> <div>One</div> <div>Two</div> <div>Three</div> </div>
+1
source share
2 answers

You need to specify flexible elements for the extension. By default, they do not consume free space.

The initial flex-basis setup is auto , which means the elements take up the size of their content.

The initial setting for flex-grow is 0 , which means that items will not grow in available space.

Add flex: 1 to your elements, which is equivalent to: flex: 1 1 0 , which is short for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0 .

 .flexbox { display: flex; } .flexbox div { flex: 1; /* new */ border: 1px solid black; padding: 10px; } 
 <div class="flexbox"> <div>One</div> <div>Two</div> <div>Three</div> </div>
+3
source

Here you go:

 <html> <head> <style> .flexbox { display: flex; } .flexbox div { flex: 1; border: 1px solid black; padding: 10px; } </style> </head> <body> <div class="flexbox"> <div>One</div> <div>Two</div> <div>Three</div> </div> </body> </html>

To make the children grow, you will need to add them to one of the flex properties. Here is a great article on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

+1
source

Source: https://habr.com/ru/post/1275558/

More articles:


All Articles