Оболочка текстового блока Flexbox

Я хочу сделать текст в моем переносе макета flexbox.Оболочка текстового блока Flexbox

Код:https://jsfiddle.net/u2oswnth/2/

.child { 
 
    border: solid 1px; 
 
    display: flex; 
 
} 
 
.left { 
 
    width: 100px; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
}

<div class="container"> 
 
    <div class="child left"> 
 
    Left! 
 
    </div> 
 
    <div class="child right"> 
 
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! 
 
    </div> 
 
</div>

Что у меня есть: При превышении ширины кадра, .rightdiv падает на следующую строку.

Что я хочу: При превышении ширины кадра, слова в .rightdiv запуска упаковки, две колонны остаться бок о бок, образуя одну строку.

Пожалуйста, помогите!

источник

2015-12-15 StragaSevera

Изменить flex-wrap: wrap;flex-wrap: nowrap;. Используя flex-wrap: wrap;, вы сообщаете div, чтобы обернуть новую строку, если она закончилась. Поскольку вы хотите, чтобы сам текст был завершен, вам нужно использовать flex-wrap: nowrap;, чтобы сохранить .right в той же строке. Текст будет автоматически обернут, когда места недостаточно.

Изменение flex-wrap: wrap; в flex-wrap: nowrap; на .container

.child { 
 
    border: solid 1px; 
 
    display: flex; 
 
} 
 
.left { 
 
    width: 100px; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
}

<div class="container"> 
 
    <div class="child left"> 
 
    Left! 
 
    </div> 
 
    <div class="child right"> 
 
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! 
 
    </div> 
 
</div>

источник

2015-12-15 07:57:26

Спасибо! Я думал, что «flex-wrap: wrap;» - об обтекании текста, а не div. Silly me = -) – StragaSevera

Нет проблем, я думал, что это была ваша мысль, когда я читал ваш вопрос. :) –

Обязательно используйте 'flex-wrap: nowrap' и NOT' flex-wrap: no-wrap' - последнее недействительно. –

Вы должны изменить flex-wrap: wrap; к flex-wrap: nowrap;

Пожалуйста, обратите внимание, что flex-wrap: no-wrap; (no-wrap с черточкой) НЕ является допустимым значением. Вот документ упоминание о нем: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

источник

2017-06-13 12:27:59 stobasan

ПРИМЕЧАНИЕ: Там нет необходимости применять "display: flex" на дочернем классе и flex-wrap: nowrap; на контейнерном классе, потому что bydefault это nowrap. Ниже приводится обновленный ответ и РАБОТАЕТ !!.

.child { 
    border: solid 1px; 
} 
.left { 
    width: 100px; 
} 
.container { 
    display: flex; 
} 

<div class="container"> 
    <div class="child left"> 
    Left! 
    </div> 
    <div class="child right"> 
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! 
    </div> 
</div>

источник

2017-11-12 22:32:32

Оболочка текстового блока Flexbox

ответ

Смежные вопросы