如何使用display flex代替左浮动和右浮动 [英] how to use display flex instead of float left and float right
本文介绍了如何使用display flex代替左浮动和右浮动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用显示flex代替float: left和float: right?
请参见下图
我尝试过这样:
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>
这是我的代码 https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview
使用display flex之后.我面临两个问题
After using display flex . i am facing two issue
-
菜单处于隐藏状态.
Menu is hide .
份额anchor tag显示在顶部
推荐答案
- 徽标不可见，因为其父级没有宽度.它确实有，但是它是一个内联元素，因此我们需要使其被
display: block(或inline-block)阻止. - 要在
flex容器内居中放置项目，可以使用align-items: center;. - 要将
share链接移至右侧，基本上，我们需要告诉浏览器我们希望.logo容器将占据整个空间.我们可以通过flex-grow: 1做到这一点.这就意味着重要的"意思是重要的".元素为.logo，它将占用空格.
- The logo is invisible because its parent has no width. It does have but it's an inline element so we need to make it block by
display: block(orinline-block). - To center an item inside
flexcontainer, you can usealign-items: center;. - To move the
sharelink to the right we need to, basically, tell the browser that we want that the.logocontainer will take the whole space. We can do this byflex-grow: 1. That means that the "important" element is.logoand it will take the space.
一起:
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
顺便说一句:没有text-underline css属性.您的意思可能是text-decoration: none.
BTW: there is no text-underline css property. You meant probably to text-decoration: none.
这篇关于如何使用display flex代替左浮动和右浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
