时间戳

首页 > 解决方案 > 为什么我的第三个元素不在其父元素之外？

html - 为什么我的第三个元素不在其父元素之外？

问题描述

我有以下 HTML 和 css

* {
  box-sizing: border-box;
}

.parent {
  background-color: #001f3f;
  display: flex;
  padding: 20px;
}

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50% !important;
  border: 3px solid #4CAF50;
}
<div class="parent">
  <div class="child one">child</div>
  <div class="child two">This is some longer content sdsds ds dssdsdsd sds dsdsdsdsdsd sd sd sds sdsdsdsds sdsdsd sd sd sd sd sdsdsdsdsds sdsdsdsd sds dsdsdsds sdsdsdsdsdsdsd</div>
  <div class="child three">child</div>
</div>

我是说弹性项目应该是 50%。我有三个项目，所以 3 x 50%，即 150%。我的父母有 100% 的宽度，为什么第三个项目适合父母，所以我有三个相等的盒子？

只有当我设置flex-wrap: wrap;在我的父母身上

.parent {
    background-color: #001f3f;
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
}

我得到第三个项目进入新行，这是预期的 - 因为这里没有第三个项目的空间。

为什么当我没有指定flex-wrap:wrap并且默认情况下flex-wrap:no-wrap，即使我指定了它们的 50% 宽度，里面的项目也是相同的

而 flex-grow: 默认为 0 吗？所以他们不应该平等地成长

标签： htmlcssflexbox

解决方案

默认 flex-shrink 值设置为 1 ，以调整子项的大小以适应方向轴集上的容器内部。

如果 flex-wrap 设置为 wrap，它不会尝试将元素放在单行（或列）上，而是将元素发送到下一行（或列）。

您需要将 flex-shrink 值重置为 0。

例子

* {
  box-sizing: border-box;
}

.parent {
  background-color: #001f3f;
  display: flex;
  padding: 20px;
  
  gap: 20px;/* added to follow your padding idea ? */
  overflow: auto;/* or hidden ? */
}

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50%;
  border: 3px solid #4CAF50;
  
  /*added*/
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);/* mind that padding idea ? */
}
<div class="parent">
  <div class="child one">child</div>
  <div class="child two">This is some longer content sdsds ds dssdsdsd sds dsdsdsdsdsd sd sd sds sdsdsdsds sdsdsd sd sd sd sd sdsdsdsdsds sdsdsdsd sds dsdsdsds sdsdsdsdsdsdsd</div>
  <div class="child three">child</div>
</div>

推荐阅读