Может кто-нибудь сказать мне, что я делаю неправильно здесь? Я хочу, чтобы ящики были ТОЧНОЙ одинаковой шириной между divA и divB. Просто потому, что поле divB имеет немного длинный текст в "p2", не следует изменять ширину всего поля. Я не хочу использовать жесткие пиксельные ширины для "p1", чтобы он мог быть гибким для ширины видовых экранов. Я просто хочу, чтобы поле p1 всегда было половину размера p2, независимо от внутреннего содержимого. Может ли кто-нибудь помочь мне или предложить лучший метод?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:100%;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
text-align:right;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
text-align:left;
border:1px solid blue;
}
</style>
</head>
<body>
<div id='divA'>
<p id="p1">Hello</p>
<p id="p2">Column 2</p>
</div>
<div id='divB'>
<p id="p1">Hello</p>
<p id="p2">Why is this box larger</p>
</div>
</body>
</html>
Если вы дадите детям явную ширину, они будут вести себя.
Значение flex будет переопределять эти ширины, что даст вам желаемый макет. Коробкам просто нужно значение для начала. Без определенной ширины они сокращаются до их ширины содержимого, тогда применяется значение flex.
Смотрите здесь: http://jsfiddle.net/ZBE7r/
...
#p1, #p2 {
width: 1px;
}
...
Он работает только в том случае, если все они имеют одинаковую ширину (может быть любое значение: 0, 1px, 100% и т.д.)
Нашел эту цитату. Это может объяснить, почему это делается.
"Похоже, что он работает так, как ожидалось. Сгибание применяется только после того, как были рассчитаны предпочтительные размеры ящиков. Таким образом, в вашем примере звучит так, что общая ширина окна добавляется к чему-то значительно большему, чем ширина контейнера. Браузер затем использует свойство flex, чтобы решить, какие поля для сквоша, чтобы они соответствовали друг другу. У вашего среднего ящика наибольшее изгиб, поэтому он раздавлен наиболее" ссылка
Если вы меняете теги p на теги div, это работает так, как ожидалось. Кажется, что flexbox вычисляет ширину, сначала проверяя начальную ширину элемента, а затем пропорционально заполняя оставшееся пространство. Оба являются блочными элементами, поэтому я не уверен, почему они обрабатываются по-разному, но это должно решить вашу проблему.