1

Доброе время суток. Есть простая верстака на flex-box

.flex-container {
  display: flex;
  width: 750px;
  margin: 0 auto;
  height: 300px;
  color: #fff;
  font-size: 2.6em;
  flex-flow: column wrap;
  position: relative;
}
.flex-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.one {
  background: #508694;
  margin-right: 10px;
  flex-basis: 100%;
}
.two {
  background: #BB844C;
  margin-bottom: 10px;
  flex: 1 1 0;
}
.three {
  background: #929D79;
  flex: 1 1 0;
}
<div class="flex-container">
  <div class="flex-item one">Some block</div>
  <div class="flex-item two">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="flex-item three">Some block</div>
</div>

Как сделать чтоб при респонсе текст внутри блока переносился когда достигает края родительского блока, а не когда упирается в край экрана?

Возможно не совсем корретно изначально описал задачу.

При адаптиве (респонсе) пока у блока с текстом есть свободное простанство все норм http://joxi.ru/n2YegBqIb6zxY2, а когда текст уже не помещается в блоке, вся верстка начинает выпадать из родителя http://joxi.ru/82QZBMxIwvxewA. Возможно тут вообще нужно другое решение и на чистом css это не реализовывается.

11
  • Pri kakom "респонсе"? Что-то не пойму о чем речь. Если развернуть верстку Вашу на весь экран - всё работает как надо и текст не покидает отведённый ему блок. 9 янв 2020 в 11:52
  • Респонс имеется ввиду изменени ширины экрана.
    – Vadim X
    9 янв 2020 в 11:58
  • вы уберите фиксированную ширину и текст сам перенесётся 9 янв 2020 в 12:01
  • можно поставить padding какой не будь 9 янв 2020 в 12:02
  • 1
    Ничего не понятно. И картинки надо загружать в вопрос - не могу их открыть.
    – Qwertiy
    9 янв 2020 в 16:21

2 ответа 2

0

Флексы не подходят для того, чтобы ими управлять как сеткой(для этого создали гриды), нужно использовать их преимущество - они очень удобно изменяются во флексовом контейнере

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

.wrapper {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	max-width: 900px;
	color: white;
	font-size: 26px;
	margin: 0 auto;
}

.one, .two > div, .three > div {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 15px;
}

.two, .three {
	flex: 1;
}

.two__One {
	flex: 1;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	margin-left: 10px;
}

.one {
  height: auto;
	flex: 2;
	background-color: red;
}

.two {
	margin-bottom: 10px;
}

.two > div {
	background-color: gold;
}

.three > div {
	background-color: pink;
}
<div class="wrapper">
	<div class="one">Super TSuper TextSuper TextSuper TextSuper TextSuper TextSuper Textext</div>
	<div class="two__One">
		<div class="two">
			<div>Super TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper Text</div>
		</div>
		<div class="three">
			<div>SuperSuper TextSuper TextSuper TextSuper TextSuper TextSuper TextSuper Text Text</div>
		</div>
	</div>
</div>

3
  • Вариант рабочий, но не совсем подходит, т.к. нужно использовать дополнительную обертку в разметке.
    – Vadim X
    10 янв 2020 в 6:37
  • @VadimX если вам хочется меньше разметки, вам придётся изучить гриды 10 янв 2020 в 6:50
  • @ Михаил Камахин - понято, Спасибо.
    – Vadim X
    10 янв 2020 в 8:08
0

Коментарии добавлены в коде

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item one">Some block</div>
        <div class="flex-item two">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div class="flex-item three">Some block</div>
    </div>
    <style>
            .flex-container {
                display: flex;
                /*width: 750px;*/ /* 1. Убираем фиксированную ширину родителю */
                margin: 0 auto;
                height: 300px;
                color: #fff;
                font-size: 2.6em;
                flex-flow: column wrap;
                position: relative;
            }
            .flex-item {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
            }
            .one {
                background: #508694;
                margin-right: 10px;
                flex-basis: 100%;
            }
            .two {
                background: #BB844C;
                margin-bottom: 10px;
                flex: 1 1 0;

                /* 2. Добавляем свойства */
                white-space: pre-wrap;
                word-break: break-word;
                padding-right: 217px; /* ширина левого (первого) блока. Динамически можно посчитать через js */
            }
            .three {
                background: #929D79;
                flex: 1 1 0;
            }
    </style>
</body>
</html>

1
  • Задачу с переносом текста решаем но основная проблема остается.
    – Vadim X
    9 янв 2020 в 15:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.