当用户扩展浏览器窗口时,我希望我的css flexBoxes最多有3列.使用我当前的代码,它向内正确弯曲,没有最小列数,但是当向外扩展时,它将始终自动将所有flexBox扩展为一行.
http://jsfiddle.net/oq6prk1p/581/
http://jsfiddle.net/oq6prk1p/581/
在这种情况下,我试图只使用css文件来实现这一点,并且根本不编辑html文件.到目前为止,这是我最接近的：
html文件：
@H_301_7@<main class="twit-container"> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> Sitting in web dev... This class is so awesome! </p> <p class="twit-attribution"> <a href="#">CSMajor2017</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">BeaverBeliever</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">NewtonRulez</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> Huh? </p> <p class="twit-attribution"> <a href="#">ConfusedTweeterer</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">Setup</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">Punchline</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">Hess</a> </p> </div> </article> <article class="twit"> <div class="twit-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="twit-content"> <p class="twit-text"> text </p> <p class="twit-attribution"> <a href="#">TheIRS</a> </p> </div> </article> </main> <button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>css文件：
@H_301_7@.twit-container { display: flex; flex-wrap: wrap; padding: 5%; margin:-10px 0 0 -10px; position: relative; } .twit { display: inline-block; padding: 20px; width: 150px; height: 200px; margin: 10px 0 0 1%; background-color: #fff; border: 1px solid #ccc; flex-grow: 1; outline: 2px solid blue;}
