Question

如何使用展示flex代替float: left和float: right？

见下图

我试过这样：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

这是我的代码 https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview

使用display flex后。我面临两个问题

菜单隐藏。
分享anchor tag显示在顶部

Answer 1

徽标不可见，因为其父级没有宽度。它确实有，但它是一个内联元素，所以我们需要通过display: block（或inline-block来阻止它。
要将项目置于flex容器内，您可以使用align-items: center;。
要将share链接向右移动，我们需要告诉浏览器我们希望.logo容器占用整个空间。我们可以通过flex-grow: 1执行此操作。这意味着“重要”元素是.logo，它将占用空间。

所有在一起：

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>

code based on GamesClient

BTW：没有text-underline css属性。你的意思可能是text-decoration: none。

如何使用display flex而不是float left和float right

1 个答案: