当不应该使用50％父宽度包装时，Flex div

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

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

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

https://jsfiddle.net/nyx9doba/

我建议使用normalize之类的东西重置所有浏览器默认值，以便更好地控制元素：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 2

你可以通过向孩子添加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 3

试试这个，你需要在孩子身上添加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 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>