图像

Question

我正在尝试使用flexbox和bootstrap在下面实现此图像。虽然flex box可以用作响应代码，但我仍然选择使用bootstrap。的类= “COL-XS-3”

但是到目前为止我已经得到了Fiddle

.services-section {
  background: #414142;
  padding: 20px 50px;
}

.services-section .flex-services {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.services-section .flex-services div {
  text-align: center;
  background: #676768;
  padding: 5px;
  flex: 1 1;
  margin: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="services-section">
  <div class="container">
    <div class="col-xs-3 flex-services">
      <div>
        <img class="img img-responsive" src="http://via.placeholder.com/120x120" alt="Services Icon">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-xs-3 flex-services">
      <div>
        <img class="img img-responsive" src="http://via.placeholder.com/150x150" alt="Services Icon">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-xs-3 flex-services">
      <div>
        <img class="img img-responsive" src="http://via.placeholder.com/200x200" alt="Services Icon">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-xs-3 flex-services">
      <div>
        <img class="img img-responsive" src="http://via.placeholder.com/180x180" alt="Services Icon">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</div>

请注意，图片下方的文字是垂直对齐的。

Answer 1

尝试将on foo:value log (value as integer) * 2 return "Success!" end foo 属性添加到display: flex，将.container添加到align-self: baseline类。

这是一个小提琴：https://jsfiddle.net/ncsgc3gn/5/

希望它有所帮助！