Flexbox пункт ширина влияет обивку

Question

См http://jsfiddle.net/56qwuz6o/3/:

<div style="display:flex"> 
    <div id="a">a</div> 
    <div id="b">b</div> 
    <div id="c">c</div> 
</div> 

div div { 
    flex: 1 1 0; 
    border:1px solid black; 
    box-sizing: border-box; 
} 

#a { 
    padding-right: 50px; 
} 

Когда у меня есть отступы, установленные на гибкой позиции (#a), ее ширина (в смысле border-box) влияет. Как заставить вычисляемую ширину игнорировать отступы? то есть. Я хочу, чтобы каждый из моих ящиков занимал 33% ширины документа.

Редактировать: Спасибо за ответы. Но на самом деле у меня на самом деле больше ящиков в строке с фиксированной шириной: т.е. на http://jsfiddle.net/56qwuz6o/7/, я хочу, чтобы #a, #b и #c для всех имели одинаковую ширину.

<div style="display:flex; width: 400px"> 
    <div id="a">a</div> 
    <div id="b">b</div> 
    <div id="c">c</div> 
    <div id="d">d</div> 
</div> 

div div { 
    flex: 1 1 33%; 
    border:1px solid black; 
    box-sizing: border-box; 
} 

#a { 
    padding-right: 100px; 
} 

#d { 
    flex-basis: 200px; 
    width: 200px; 
} 

Answer 1

1 вариант вы имеете установить flex-basis: 33.33% или номер относительно количества детей, у вас есть. Я не уверен, есть ли способ сделать это динамически.

Answer 2

Правильный `flex: declartion, похоже, работает.

div div { 
 

 
    flex: 0 0 33%; 
 
    /* don't grow, don't shrink, be 33% wide */ 
 
    /* flex:1 0 33% works too */ 
 
    
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    } 
 

 
#a { 
 

 
    padding-right: 100px; 
 

 
}

<div style="display:flex"> 
 
    <div id="a">a</div> 
 
    <div id="b">b</div> 
 
    <div id="c">c</div> 
 
</div>

Answer 3

Создание Flexbox стилей, чтобы сделать процесс разработки быстрее

<style> 
    .flex-row { 
    display: flex; 
    display: -webkit-flex; 
    flex-direction: row; 
    -webkit-flex-direction: row; 
    } 

    .flexSize-1 { 
    flex: 1; 
    -webkit-flex: 1; 
    } 
    .flexSize-1 { 
    flex: 2; 
    -webkit-flex: 2; 
    } 
</style> 

Пока flex свойство равно для каждого столбца, то каждый столбец получит быть одинакового размера accross окно.

<div class="flex-row"> 
    <div class="flexSize-1"> 
     <h1 class="page-header">Test</h1> 
    </div> 
    <div class="flexSize-1"> 
     <h1 class="page-header">Test</h1> 
    </div> 
    <div class="flexSize-1"> 
     <h1 class="page-header">Test</h1> 
    </div> 
    </div> 

если вы хотите 1 столбец будет больше, чем другой столбец, дать этот столбец класс .flexSize-2, и он будет в два раза шире, как .flexSize-1