Menu
How to use display flex instead of float: left and float: right?
See below image
I tried like this:
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a {
text-underline: none;
}
.bg {
background: #eee;
}
.header {
display: flex;
background: #af2c2c;
}
.logo h2 {
color: #fff;
font-family: "Times New Roman", Times, serif
}
.menu_hang {
background-position: -70px -92px;
background-image: url(https://static.toiimg.com/photo/52121907.cms);
background-size: 200px;
width: 30px;
height: 24px;
opacity: .8;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="bg">
<header>
<div class="header">
<div>
<i class="menu_hang"></i>
</div>
<div class="logo">
<h2>HIM</h2>
</div>
<div>
<a href="">share</a>
</div>
</div>
</header>
</div>
</div>
</body>
</html>here is my code https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview
After using display flex . i am facing two issue
Menu is hide .
share anchor tag is showing on top
944
display: block (or inline-block).flex container, you can use align-items: center;.share link to the right we need to, basically, tell the browser that we want that the .logo container will take the whole space. We can do this by flex-grow: 1. That means that the "important" element is .logo and it will take the space.All together:
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a {
text-decoration: none;
}
.bg {
background: #eee;
}
.header {
display: flex;
align-items: center;
background: #af2c2c;
}
.logo {
flex-grow: 1;
}
.logo h2 {
color: #fff;
font-family: "Times New Roman", Times, serif
}
.menu_hang {
display: block;
background-position: -70px -92px;
background-image: url(https://static.toiimg.com/photo/52121907.cms);
background-size: 200px;
width: 30px;
height: 24px;
opacity: .8;
}
.share-container {
margin-right: 10px;
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div id="wrapper">
<div id="bg">
<header>
<div class="header">
<div>
<i class="menu_hang"></i>
</div>
<div class="logo">
<h2>HIM</h2>
</div>
<div class="share-container">
<a href="">share</a>
</div>
</div>
</header>
</div>
</div>https://plnkr.co/edit/5SYSWCHzHAe3ED5K?p=info&preview
BTW: there is no text-underline css property. You meant probably to text-decoration: none.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
