Question

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
  <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
  <style>
    #container {
      display:flex;
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
<div id="container" >
</div>
<script>
  class App {
    constructor() {
      document.addEventListener("DOMContentLoaded", () => {
        this.init()
      })
    }

    init() {
      var container = document.querySelector("#container")
      $(container).width()

      function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

      for (var i = 0; i < 50; i++) {
        let el = $(`<div/>`);
        el.css("background-color", getRandomColor())
        el.width(Math.floor(100 + Math.random() * 100))
        el.css("height", "20vh")
        container.appendChild(el[0])
      }
    }
  }

 new App()
</script>
</body>
</html>

它的右边没有相同的填充，但是我希望它就像google图像搜索页面（左右两边的所有行都是相同的），该怎么做

Answer 1

只需将flex-grow:1添加到您的商品中：

class App {
  constructor() {
    document.addEventListener("DOMContentLoaded", () => {
      this.init()
    })
  }

  init() {
    var container = document.querySelector("#container")
    $(container).width()

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    for (var i = 0; i < 50; i++) {
      let el = $(`<div/>`);
      el.css("background-color", getRandomColor())
      el.width(Math.floor(100 + Math.random() * 100))
      container.appendChild(el[0])
    }
  }
}

new App()

#container {
  display: flex;
  flex-wrap: wrap;
}

#container>* {
  flex-grow: 1;
  height:25vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<div id="container">
</div>

Answer 2

您必须为div标签的宽度设置flex-basis： def latinize_sentence(sentence): """return the Bee Latin version of the sentence.""" latin = sentence.lower().split(" ") for word_num in range(len(latin)): if (latin[word_num][0] in "aeiou") or (latin[word_num][0].isalpha() == False): latin[word_num] += 'buzz' else: latin[word_num] = latin[word_num][1:] + latin[word_num][0] latin[word_num] += 'uzz' latin = ' '.join(latin) return latin def print_latin(sentence): """Print out the result""" print("Bee latin = {}".format(sentence)) def main(): while(True): user_input = input("Enter English sentence: ") if(user_input == "m"): print("oodbyeguzz") break else: print_latin(latinize_sentence(user_input)) main()

然后将js中的宽度设置为100％：

#container  div{
        flex-grow: 0;
       flex-shrink: 1;
       flex-basis: 20%
      }

 el.css("width", "100%")

Answer 3

  #container {
      display: flex;
      flex-wrap: wrap;

      ////////////////
      justify-content: space-between;
    }

使用flex布局时，如何使flex行的宽度相同

3 个答案: