代码之家  ›  专栏  ›  技术社区  ›  V.S

css flexbox-将div放在两个div中间[重复]

  •  2
  • V.S  · 技术社区  · 7 年前

    我有一个标志之间的导航和搜索按钮,我想在页面中心的标志。使用水平自动边距可以使中心div向右移动,因为左侧的内容更大。

    .flexbox {
      display: flex;
    }
    .logo {
      margin: 0 auto;
    }
    <div class="flexbox">
      <div class="left-nav">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
        <a href="#">Link6</a>
        <a href="#">Link7</a>
        <a href="#">Link8</a>
    
      </div>
      <div class="logo">
        Logo
      </div>
      <div class="right-search">
        search
      </div>
    </div>
    3 回复  |  直到 7 年前
        1
  •  1
  •   Toan Lu    7 年前

    试试你的css。

    它使div在显示器上具有一定的宽度,并使logo文本居中。

        .flexbox {
          display: flex;
        }
        .left-nav{
        	width:25%;
        }
        .logo {
          width:50%;
          text-align: center;
        }
        .right-search{
        	width:25%;
        }
    <div class="flexbox">
      <div class="left-nav">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
        <a href="#">Link6</a>
        <a href="#">Link7</a>
        <a href="#">Link8</a>
    
      </div>
      <div class="logo">
        Logo
      </div>
      <div class="right-search">
        search
      </div>
    </div>
        2
  •  0
  •   Stev Ngo    7 年前

    或者

    .flexbox {
      display: flex;
    }
    .left-nav,
    .right-search {
        flex: 0 0 25%;
    }
    .logo {
      flex: 0 0 50%;
      text-align: center;
    }
    

    别忘了添加供应商前缀。

        3
  •  0
  •   Toan Lu    7 年前

    您需要设置一个flex基值,然后在这些元素上设置收缩值,以便它们可以根据其基值具有各自的宽度。 你还需要申报 align-items: center

    .flexbox {
      display: flex;
      align-items: center;
    }
    
    .flexbox>div {
      flex-basis: 33%;
    }
    
    .left-nav {
      flex-flow: column wrap;
      flex-shrink: 2;
    }
    
    .logo {
      flex-shrink: 1;
      text-align: center;
    }
    
    .right-search {
      flex-shrink: 2;
    }
    <div class="flexbox">
      <div class="left-nav">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
        <a href="#">Link6</a>
        <a href="#">Link7</a>
        <a href="#">Link8</a>
    
      </div>
      <div class="logo">
        Logo
      </div>
      <div class="right-search">
        search
      </div>
    </div>