Flex自动填充空间，不拉伸

时间：2016-07-07 09:26:16

标签： css html5 css3 flexbox

我正在使用flex工作，所以如果做错了什么我会道歉。 这就是问题所在：

＆＃13;
＆＃13; 
@media all and (min-width: 672px) {
    main {
        width: 672px;
        margin: 0 auto;
        overflow: auto;
        border: 7px solid transparent;
        border-image: url(../images/border.png) 40% stretch;
    }
}

@media all and (max-width: 671px) {
    main {
        width:340px;
        margin: 0 auto;
        overflow: auto;
        border: 7px solid transparent;
        border-image: url(../images/border.png) 40% stretch;
    }
}

main {
    display: flex; flex-flow: row wrap;
    justify-content: space-between;
}

main > div {
    width: 320px; height: 250px; margin: 4px;
    border: 1px solid gray;
    background-color: lightgray;
}

#facebook { height: 508px; }
＆＃13; 
<main>
    <div id="one">
        <img src="images/avatar.jpg" alt="Profile image">
    </div>
    <div id="two">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="facebook">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="four">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="five">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="six">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
</main>
＆＃13;
＆＃13;
＆＃13;

我在下面的屏幕中得到结果：

enter image description here

但是我需要它像：

＆＃13;
＆＃13; 
main {
    min-height: 600px;
    background-color: black;
}

main > div {
    width: 320px; height: 250px; margin: 4px;
    border: 1px solid gray;
    background-color: lightgray;
    float: left;
}
＆＃13;
＆＃13;
＆＃13;

它给出了我需要的结果：

enter image description here

为什么我不会使用浮动你可能会问？因为我使用flex的东西：＆＃34; order＆＃34;调整我的容器的顺序。任何人都知道如何弯曲以填充空间而不是拉伸？

1 个答案:

答案 0 :(得分：0)

我不确定您是否尝试删除主要＆gt;的高度div但它很简单。对于使用flex的砌体布局，您可能需要查看this link. 

@media all and (min-width: 672px) {
    main {
        width: 700px;
        margin: 0 auto;
        overflow: auto;
        border: 7px solid #000;
    }
}

@media all and (max-width: 671px) {
    main {
        width:340px;
        margin: 0 auto;
        overflow: auto;
        border: 7px solid #f00;
    }
}

main {
     display: flex; 
     flex-flow: row wrap;
     justify-content: space-between;
}
h2{
  font-weight: normal;
  font-size: 14px;
}
main > div {
    width: 320px;
    margin: 4px;
    padding: 10px;
    border: 1px solid gray;
    background-color: lightgray;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
}
<main>
    <div id="one">
        <img src="http://placehold.it/300/300" alt="Profile image">
    </div>
    <div id="two">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="facebook">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="four">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="five">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
    <div id="six">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
  <div id="seven">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
    </div>
  <div id="eight">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam,.</div>
</main>

相关问题
最新问题