Question

我已经在这方面工作了几天并阅读有关显示flex的信息，但我还有一个我无法修复的问题。我有3个盒子，他们有％宽度和一些px彼此分开，像这样

[[first box] [second box] [third box]]

所以，为了做到这一点，我使用了nth-of-type（3n + 2）以获得所有中间元素并将px分离添加到两侧

每个方框都有两个div，一个图像（左边）和一个文本，但是，当文本至少有两行时，该框会有未对齐的

[[first box] [second box] 
                          [third box]]

那并不好。因此，如果我移除显示器，则使用样式：flex和框对齐，但文本现在不垂直对齐中间 - .-

＆＃13;

.general-cont {
  width: 100%;
  text-align: center;
}

.each-cont {
  width: 32.5%;
  display: inline-block;
  margin-top: 6px;
}

.each-cont:nth-of-type(3n+2) {
  margin-left: 10px;
  margin-right: 10px;
}

.img-cont {
  float: left;
  height: 48px;
  display: flex;
  align-items: center;
}

.text-cont {
  height: 48px;
  overflow: hidden;
  align-items: center;
  text-align: left;
  display: flex;
}

＆＃13;

<div class="general-cont">
  <div class="each-cont">
    <a>
      <div class="img-cont">
        123
      </div>
      <div class="text-cont">
        456
      </div>
    </a>
  </div>

  <div class="each-cont">
    <a>
      <div class="img-cont">
        ABC
      </div>
      <div class="text-cont">
        DEF
      </div>
    </a>
  </div>

  <div class="each-cont">
    <a>
      <div class="img-cont">
        QWE
      </div>
      <div class="text-cont">
        ASD
      </div>
    </a>
  </div>

</div>

＆＃13;

Answer 1

你的代码是一切。当你使用flex时，你不应该组合宽度，浮动等。以下是使用代码的简单示例：

.general-cont {
  display: flex;
  flex-direction: row;
  flex-flow: center;
  align-items: stretch;
}

.each-cont {
  background: #eee;
  margin: 0 10px;
  padding: 10px;
}


.img-cont {
  display: block;
}

http://codepen.io/paulcredmond/pen/rrRvkk

我建议阅读CSS技巧指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

显示flex break mulitline文本框

1 个答案: