flex-flow: row wrap - отображается как столбец, а не строка - PullRequest
Новая
       3

flex-flow: row wrap - отображается как столбец, а не строка

0 голосов
/ 08 мая 2020

По какой-то причине flexbox не отображает мой контент подряд. Параметр гибкости переносится даже в полноэкранном режиме до того, как экран станет меньше. Не знаю, зачем он это делает. Я приложил скриншоты с кодом, чтобы вы могли понять, что я имею в виду. Я ожидал, что изображение будет справа от текста. My text and image isn't being displayed in a row even though the browser is in full screen mode. The wrap seems to be kicking in

* {
	margin: 0;
	padding: 0;
	box-sizing: 0;
}

li,
a {
	font-size: 0.75rem;
	font-family: "Roboto";
	font-weight: 700;
	color: #303133;
	text-decoration: none;
}

.section2-h1 {
	font-size: 56px;
	font-family: "Roboto";
}

button {
	width: 176px;
	height: 47px;
	background: #6442ff;
	color: #ffffff;
	font-family: "Roboto";
	font-size: 12px;
	line-height: 18px;
	align-items: center;
	border: none;
}

.section2-head {
	margin: 160px;
	display: flex;
	flex-flow: row wrap;
}

.section2-text {
	max-width: 537px;
	margin-right: 74px;
}

.button {
	margin-top: 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <section id="section2">
        <header class="section2-head">
            <div class="section2-text">
                <h1 class="section2-h1"> Lorem ipsum dolor sit ame. 
                </h1>
                <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
                <button class="button">READ MORE</button>
            </div>
            <img src="img/test1.jpg" alt="" class="section2-img">
        </header>
    </section>
    
</body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

Ваше изображение слишком велико для строки, flex работает правильно и оборачивает ваше изображение под текстом, потому что больше нет места. Я знаю, что вы говорите, что размер изображения был определен специально для этой области, но с полями, которые у вас есть на родительском элементе и текстовой оболочке, под ним будет pu sh.

...