Question

由于无法弄清楚，我感到很愚蠢，但是由于某种原因，我无法让那些div停留在同一行。我希望它们彼此排成一行，因为它们都有一半的父div width，同时保留flex wrap，以防万一我增加了div。

这是我的代码

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
 }
.aside {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
* {
    padding: 0;
    box-sizing: border-box;
 }

<aside class="aside"> 
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
            </div>
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

        </aside>

Answer 1

您可以通过向子级添加flex：1来解决此问题

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
    flex:1;
 }
.aside {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
* {
    padding: 0;
    box-sizing: border-box;
 }

<aside class="aside"> 
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
            </div>
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

        </aside>

Answer 2

尝试此操作，您需要在子项上添加flex-direction并删除flex-flow：

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
    flex-direction: row; //need flex direction here
 }

.aside {
    display: flex;
    width: 100%;
}

* {
    padding: 0;
    box-sizing: border-box;
 }

https://jsfiddle.net/ao7hf6n9/

Answer 3

某些浏览器默认设置会导致元素具有边距。将项目的边距设置为0

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    margin: 0;
    min-height: 200px;
    padding: 50px;
 }

https://jsfiddle.net/nyx9doba/

我建议使用标准化等方法重置所有浏览器的默认设置，以便更好地控制元素：https://necolas.github.io/normalize.css/

更新：要保留边距，您需要将宽度减小为50％减去边距：

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: calc(50% - 20px);
    margin: 10px;
    min-height: 200px;
    padding: 50px;
 }

https://jsfiddle.net/y6jfadcw/

Answer 4

商品的保证金会使您的商品超过50％。如果将其减少到40％，它将可以正常工作。或者，您可以删除边距。

.aside__item {
  background-color: green;
  margin: 10px;
  color: white;
  width: 40%;
  min-height: 200px;
  padding: 50px;
}

.aside {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

* {
  padding: 0;
  box-sizing: border-box;
}

<aside class="aside">
  <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
  </div>
  <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

</aside>

不支持时，具有50％父级宽度环绕的Flex div

4 个答案: