<!DOCTYPE html>
<html>
<header>
<title>Welcome to Meme facts website </title>
<h1 style="text-align: center"> MEMES MENU </h1>
</header>
<body>
<div class="container">
<div class="flex-box">
<div class="topleft"></div>
<div class="topright"></div>
</div> <br> <br> <br>
<div class="flex-box" style="background-color: white">
<div class="bottomleft"</div>
<div class="bottomright"</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/yRF5c-O/blue-side-bubbles-4k-and-full-hd_4p0cs3stx__F0000.png")
}
.container {
margin: auto;
padding: auto;
background-color: #666666 ;
width: 1200px;
height: 555px;
}
.flex-box {
margin: auto;
padding: auto;
width: 1000px;
height: 250px;
background-color: #ADADAD;
display: flex;
flex-warp: wrap;
}
.topleft {
flex: left;
background-color: white;
height: 250px;
width: 250px;
}
.topright {
background-color: black;
height: 250px;
width: 250px;
margin-left: auto;
text-align: right;
}
.bottomleft {
background-color: red;
height: 250px;
width: 250px;
}
.bottomright {
background-color: blue;
height: 250px;
width: 250px;
margin-left: auto;
text-align: right;
}
Я попробовал с другим flexbox, он работал нормально, но со вторым он не работает как первый блок выше, кажется, что он игнорируется,поле не работает в любом случае.
оно не двигается вправо от flexbox, как должно быть на верхнем flexbox, оно осталось слева и перекрывает другие элементы.