Geek Answers Handbook

How to get flexbox to enable padding in calculations?

Below are two lines.

  • The first line is two elements in flex 1 and one in flex 2 .

  • The second line is the two elements in flex 1 .

According to specification 1A + 1B = 2A

But when the addition is included in the calculation, the sum is incorrect, as you can see in the example below.

Question

How do I get a Flex field to include an addition in its calculation so that the fields in the example line up correctly?

 .Row{ display:flex; } .Item{ display:flex; flex:1; flex-direction:column; padding:0 10px 10px 0; } .Item > div{ background:#7ae; } .Flx2{ flex:2; } 
 <div class="Row"> <div class="Item"> <div>1A</div> </div> <div class="Item"> <div>1B</div> </div> <div class="Item Flx2"> <div>1C</div> </div> </div> <div class="Row"> <div class="Item"> <div>2A</div> </div> <div class="Item"> <div>2B</div> </div> </div>
+11
html css flexbox css3
source share
2 answers

Decision:

Set the margin child instead of padding in the flex element.

 .Row{ display:flex; } .Item{ display:flex; flex:1; flex-direction:column; } .Item > div{ background:#7ae; margin:0 10px 10px 0; } .Flx2{ flex:2; } 
 <div class="Row"> <div class="Item"> <div>1A</div> </div> <div class="Item"> <div>1B</div> </div> <div class="Item Flx2"> <div>1C</div> </div> </div> <div class="Row"> <div class="Item"> <div>2A</div> </div> <div class="Item"> <div>2B</div> </div> </div>

Problem:

Calculation is performed without padding . So; adding padding to the flex element does not give you the expected width of the spec .

Specific article

For example, the available space for a flex item in a container with a flexible floating point container:

  • the width of the flexible containers containing the block, minus the border, border and filling of the flexible containers in horizontal size
  • infinity in vertical size

Why is padding not calculated? This is what the specification wants.

Define the available main and cross spaces for flex items. For each dimension, if this flex container content window has a specific size, use it; if the size of the flex container falls within the min or max-content limit, the available space in this dimension is that limit; otherwise, subtract the flex container field, border, and padding from the space available to the flex container in this dimension, and use this value . This can lead to an infinite value.

If you subtract padding and margin from the size of the element, you will get:

A1 + A2 = B1

However, after you did this, an add-on was added to the element. The more elements, the more additions. This is not computed in width, making your statement false.

+5
source share

How to get flexbox to enable padding in calculations?

In your code, adding is included in the calculations.

According to specification 1A + 1B = 2A

I do not believe that is right. Maybe a link to a link for an explanation.

flex-grow property

When you apply flex: 1 to an element, you use the flex transcript property to say the following:

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

flex-grow tells the flex item to use free space in the container.

Here is your code:

 .Item { display: flex; flex: 1; flex-direction: column; padding: 0 10px 10px 0; }

The first line of padding-right: 10px applies to the three elements.

In the second line, padding-right: 10px is applied to two flexible elements.

Therefore, the first line of 10px has less free space for distribution. This disrupts the alignment of the grid.

To allocate space (for example, you want the element to occupy the remaining height or width of the container), use flex-grow .

To accurately determine the size of an element, use flex-basis , width or height .

Here is some more info:

  • flex-grow does not match flex items as expected
  • How does flex-grow work with flexbox?
+2
source share

More articles:


All Articles