Почему ширина обрабатывается по-разному в flexbox?

Question

В последнее время я играю с display:flex, так как я вижу, что он становится все более тенденциозным. В быстром тесте, используя подходы flex и non-flex CSS, я понял, что мои ширины и поля всегда соблюдаются при использовании flex. Является ли это хорошим подходом, учитывая, что мне, скорее всего, понадобится желоб между элементами? Кроме того, где же разница между промежутками? Это то, что я имею в виду:

HTML

<div class="container"> 
    <div class="box"> 
    <span class="inner-box">This gives me a 30px X 60px</span> 
    <span class="inner-box">This gives me a 30px X 60px</span> 
    <span class="inner-box">This gives me a 30px X 60px</span> 
    </div> 
    <div class="box2"> 
    <span class="inner-box">This gives me a width larger than the specified 30px</span> 
    <span class="inner-box">This gives me a width larger than the specified 30px</span> 
    <span class="inner-box">This gives me a width larger than the specified 30px</span> 
    </div> 
</div> 

CSS

.box{ 
    background: orange; 
    display:flex; 
    flex-direction:row-reverse; 
    padding:0 10px; 
} 

.box2{ 
    background: green; 
    text-align:right; 
    padding:0 10px; 
} 

.inner-box{ 
    width:30px; 
    background:#fff; 
    margin:0 0px; 
} 

Указание ширины во время выполнения

DEMO

Answer 1

Вы используете <span> элементов. По умолчанию они встроены. width автоматически игнорируется для встроенных элементов.

В первом разделе div (.box), однако, span «ы значение инлайн display переопределяется материнской компании display: flex, который устанавливает flex formatting context. Следовательно, все дети становятся гибкими предметами, которые относятся к width и height.

Flex Items

гибком пункт устанавливает новый контекст форматирования для его содержимого. Тип этого форматирования определяется его значением display, , как обычно. Однако сами элементы гибки: flex-level коробки, а не блочные блоки: они участвуют в гибком контексте своего контейнера , а не в контексте форматирования блока.

^{источник: https://drafts.csswg.org/css-flexbox-1/#flex-items}

---

Во втором div секции (.box2), то span элементы остаются display: inline, так как они не удаляются из block-formatting context, и любые width и height заданий игнорируются.

Попробуйте display: inline-block: http://codepen.io/anon/pen/yeggOy

Ссылки:

• Setting the width of inline elements
• How to set width of a inline element?
• Does height and width not apply to span?
• Inline Elements With Width

Answer 2

Ваш вопрос немного неясен, но если, как заметил MrLister:

Если display:flex почестей ширина, где display:inline нет? Если да, то да,.

Это происходит потому, что, согласно spec,

Flex элементы рисовать точно так же, как встроенные блоки

и так пострадавших от ширины отчетности.