<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="hat">
<div><p>Main</p>
<p>Contacts</p>
<p>Shop</p></div>
<div>
<button>JustBtn1</button>
<button>JustBtn1</button>
</div>
</div>
<button class="around">space-around</button>
<button class="between">space-between</button>
<button class="evenly">space-evenly</button>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.hat{
width: 100%;
height: 80px;
display: flex;
background: rgb(255, 124, 124);
align-items: center;
justify-content: space-between;
}
.hat div{
display: flex;
width: 200px;
justify-content: space-around;
}
</style>
<script>
let hat = document.querySelector('.hat')
let between = document.querySelector('.between')
let around = document.querySelector('.around')
let evenly = document.querySelector('.evenly')
between.onclick = function(){
hat.style.justifyContent = 'space-between'
}
around.onclick = function(){
hat.style.justifyContent = 'space-around'
}
evenly.onclick = function(){
hat.style.justifyContent = 'space-evenly'
}
</script>
</html>
Простой
Простой
Простой
Простой