如何实现屏幕中央的标志,右侧有菜单图标和文本。
我已经搜索了一些flex教程,但没有找到一个实现它的方法。
请参考此图片以了解其外观。
我希望只使用 flex 来完成这个需求,不需要使用额外的空白
请参考此图片以了解其外观。
.logo {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<nav class="navbar container">
<div class="logo"></div>
<div class="navbar-toggle">
<span>Menu</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
<path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
<path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
</svg>
</div>
</nav>
元素。
谢谢。
谢谢。