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

Posted 2021-03-27

我觉得因为无法弄清楚而感到愚蠢，但由于某种原因，我不能让这些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>

答案

有一些浏览器默认值导致元素有边距。将项目的边距设置为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/

另一答案

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

另一答案

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

另一答案

物品上的保证金会导致物品超过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的主要内容，如果未能解决你的问题，请参考以下文章

父 div（flex）中的 2 个 div，第一个 div 是固定宽度 - 将第二个宽度扩展到其余部分 [重复]

解决flex布局导致子元素的宽度无效的问题

flex布局怎么设置其中元素的宽度

两个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。

父容器flex布局，子控件absult布局，会影响父容器的宽度

我有一个相互重叠的 flex 包装 div 容器。这些可能是不同的高度并包裹多次。如何避免重叠？