代码之家 › 专栏 › 技术社区 › AlphaX

无法将flex box项包装在2列设置中[重复]

flexbox css3 css

AlphaX · 技术社区 · 7 年前

我知道这个问题已经被问了好几次,解决方法是flex-wrap:wrap,但由于某些原因,这在我的代码中不起作用。

我基本上总是需要两个div相邻的一排,然后包装。

    .wrapper {
      display: flex;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-box;
      flex-wrap: wrap;
    }

    .box {
      flex: 50%;
      text-align: center;
      padding-bottom: 10px;
      color: #8988DB;
      flex-wrap: wrap;
      border: 1px solid black;
    }

  <div class="wrapper">
  
    <div class="box"><br>Valerian Root</div>
    <div class="box"><br>Lavender</div>
    <div class="box"><br>Lemon Balm</div>
    <div class="box"><br>Chamomile</div>
    <div class="box"><br>Passion Flower</div>
    <div class="box"><br>Hops</div>
    <div class="box"><br>Rooibos</div>
    <div class="box"><br>Cinnamon</div>
    
  </div>

阿尔法

3 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

注意,在flex容器的CSS规则中,将 display: flex 财产所有前缀版本。

要使它在IE11中也能工作,请使用 width: 50% 而不是 flex: 50% ,结合 box-sizing: border-box 边框/填充 包含在设置的宽度中。

.wrapper {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-box;
      display: flex;
      flex-wrap: wrap;
    }

    .box {
      box-sizing: border-box;
      width: 50%;
      padding: 0 30px 10px;
      text-align: center;
      color: #8988DB;
      border: 1px solid black;
    }

<div class="wrapper">
  
    <div class="box"><br>Valerian Root</div>
    <div class="box"><br>Lavender</div>
    <div class="box"><br>Lemon Balm</div>
    <div class="box"><br>Chamomile</div>
    <div class="box"><br>Passion Flower</div>
    <div class="box"><br>Hops</div>
    <div class="box"><br>Rooibos</div>
    <div class="box"><br>Cinnamon</div>
    
  </div>

Paulie_D 7 年前

看起来你需要的只是一个正确的CSS重置,特别是 box-sizing width 计算。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 50%;
  text-align: center;
  padding-bottom: 10px;
  color: #8988DB;
  border: 1px solid black;
}

<div class="wrapper">

  <div class="box"><br>Valerian Root</div>
  <div class="box"><br>Lavender</div>
  <div class="box"><br>Lemon Balm</div>
  <div class="box"><br>Chamomile</div>
  <div class="box"><br>Passion Flower</div>
  <div class="box"><br>Hops</div>
  <div class="box"><br>Rooibos</div>
  <div class="box"><br>Cinnamon</div>

</div>

serraosays 7 年前

踏入 CSS Grid ,它是这个用例的理想选择。你的用例非常简单,你只需要三行CSS就可以完成。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; // creates two responsive columns
  grid-gap: 10px; // puts 10px between each node in the grid
}

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前