Question

我正在尝试使用Flexbox创建类似这样的内容，但遇到了困难。参见图片示例：

我尝试使用浮点数进行此操作，并认为这太有挑战性了。因此，我改为使用flexbox。

我也正在使用CSS通过图像。

.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

.flex-container>div {
  border: 1px solid #fff;
  width: 300px;
  justify-content: space-around;
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.row {
  display: flex;
  justify-content: center;
}

.row_cell {
  flex: 1
}

.phoneimg {
  display: flex;
  background-image: url(%image(MS_HR_MR_PHONE_FL));
  background-repeat: no-repeat;
  content: "";
  background-color: rgba(255, 255, 255, 0.0);
  background-size: 55px 90px;
  */ width: 55px;
  height: 90px;
}

<div class="flex-container">
  <div>
    <div class="phoneimg">
      <div>column1</div>
    </div>
  </div>
  <div>
    <div class="phoneimg">
      <div>column2</div>
    </div>
  </div>
  <div>
    <div class="phoneimg">
      <div>column3</div>
    </div>
  </div>
  <div class="row">
    <div class="rowcell">row</div>
  </div>
</div>

我希望看到列，但所有内容都是垂直堆叠的。

Answer 1

您可以使用flex的分层方法来实现。首先在列方向上使用flex两行，然后在第一行上，就可以像在行方向上一样使用flex。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .parent-container {
      background-color: DodgerBlue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .flex-container {
      display: flex;
      justify-content: center;
    }
    
    .flex-container>div {
      border: 1px solid #fff;
      width: 300px;
      justify-content: space-around;
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }
    
    .row {
      display: flex;
      justify-content: center;
      border: 1px solid #fff;
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }
    
    .row_cell {
      flex: 1
    }
    
    .phoneimg {
      display: flex;
      background-image: url(%image(MS_HR_MR_PHONE_FL));
      background-repeat: no-repeat;
      content: "";
      background-color: rgba(255, 255, 255, 0.0);
      background-size: 55px 90px;
      */ width: 55px;
      height: 90px;
    }
  </style>
</head>

<body>
  <div class="parent-container">
    <div class="flex-container">
      <div>
        <div class="phoneimg">
          <div>column1</div>
        </div>
      </div>
      <div>
        <div class="phoneimg">
          <div>column2</div>
        </div>
      </div>
      <div>
        <div class="phoneimg">
          <div>column3</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="rowcell">row</div>
    </div>
  </div>
</body>

</html>

Answer 2

    <!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Untitled Document</title>
    <style>
        .flex-container {
            display: flex; 
            justify-content: center;

        }

        .flex-container > div {
            border: 1px solid #fff;
            width: 300px;
/*
            justify-content: space-around;

            margin: 10px;
            padding: 20px;
            font-size: 30px;
*/
        }

        .row {   
            display: flex;
            justify-content: center;
        }

        .row_cell {   
            flex: 1
        }

        .phoneimg {
            display: flex; 
            background-image: url(%image(MS_HR_MR_PHONE_FL));
            background-repeat: no-repeat;
            content: "";
            background-color    : rgba(255,255,255,0.0);
            background-size: 55px 90px;*/
            width: 55px;
            height: 90px;
            align-items: center;
        }
        .phoneimg div
        {
            font-size: 18px;
    margin-left: 15px;
        }
.fa
        {
                font-size: 45px;
        }
    </style>
</head>

<body>
    <div class="flex-container">

        <div>

            <div class="phoneimg">
                <i class="fa fa-phone"></i>
                <div>1.800.xxx.xxxx<br>
1.555.xxx.xxxx</div>
            </div>
        </div>
        <div>
            <div class="phoneimg">
                <i class="fa fa-envelope"></i>
                <div>Email US</div>
      </div>
        </div>
     <div>
        <div class="phoneimg"> 
            <i class="fa fa-map-marker"></i>
            <div>Address Line1<br>
            Address Line2<br>
            Address Line3</div> 
        </div>
        </div>
         </div>
<div class="row">
<div class="rowcell">Monday - Friday<br>
    8 A.M - 5.00 P.M<br>
    Excluding State Holidays</div> 
</div>


</body>
</html>

希望这对您有用

包含文本和图像时的Flexbox格式问题

2 个答案: