弹性盒布局。无法使框的宽度相同[重复]

Posted 2023-03-05

【中文标题】弹性盒布局。无法使框的宽度相同[重复]

【英文标题】：Flexbox layout. Unable to get boxes to same width [duplicate]

【发布时间】：2018-02-25 03:22:53

【问题描述】：

一直在网上浏览我的问题的解决方案，让所有的 flexbox 具有相同的宽度，但没有运气。所以我试着在这里问你。

如您所见，如果描述很长，框也会更宽。一直在玩word-wrap: break-word;，没有任何运气。

请参阅下面的 sn-p 或 jsfiddle。

.buttons 
  display: flex;


.buttons>a 
  margin: 0 5px;


.food-box 
  flex: 1;
  position: relative;
  background-color: white;
  min-height: 300px;
  background-color: #ffffff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  word-wrap: break-word;
  margin: 0 !important;
  padding: 0 !important;


.food-box .food-box-image 
  position: absolute top: 0 left: 0;
  background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
  background-size: cover;
  width: 100%;
  min-height: 150px;
  background-color: red;


.food-box .food-box-content 
  position: absolute bottom: 0 left: 0;
  word-wrap: break-word;
  width: 100%;
  min-height: 150px;
  background-color: #e25822;
  color: #fff;
  font-size: 70%;
  padding-top: 60px;
  padding-left: 5px;
  padding-right: 5px;


.food-box .food-box-badge 
  display: table;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  padding-left: 10px;
  padding-right: 10px;


.food-box .food-box-badge span 
  color: #666;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em;
  word-wrap: break-word;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="buttons">
  <asp:LinkButton runat="server" id="lnkNewTapas" OnClick="lnkNewTapas_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGTapas">
      </div>
      <div class="food-box-badge">
        <span>Tapas</span>
      </div>
      <div class="food-box-content">
        Velsmakende og orientalske tapasretter!
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNavKoldtbord" OnClick="lnkNavKoldtbord_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGKoldtbord">
      </div>
      <div class="food-box-badge">
        <span>Koldtbord</span>
      </div>
      <div class="food-box-content">
        Velg mellom våre to smakfulle koldtbordvarianter...
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkPasmurt" OnClick="lnkPasmurt_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGPasmurt">
      </div>
      <div class="food-box-badge">
        <span>Påsmurt</span>
      </div>
      <div class="food-box-content">
        Velg fritt i vårt store utvalg av baguetter, snitter, rundstykker.
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNewMed" OnClick="lnkNewMed_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGMed">
      </div>
      <div class="food-box-badge">
        <span>Middelhavs buffét</span>
      </div>
      <div class="food-box-content">
        Orientalske matretter med spennende smaker!
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNewVarmmat" OnClick="lnkNewVarmmat_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGVarmmat">
      </div>
      <div class="food-box-badge">
        <span>Varmmat</span>
      </div>
      <div class="food-box-content">
        Et stort utvalg av varmmatretter!
      </div>
    </div>
  </asp:LinkButton>
</div>

【问题讨论】：

您所需要的只是弹性项目上的flex: 1。 jsfiddle.net/7pwar5v6/2

@Michael_B : 已经试过了，没用...自己试试 :) 我注意到很多问题被多次标记为重复...而且 70% 的时间是正确的。 . 在这种情况下.. 它更像是一个通用的......“原始的 CSS 弄乱了 flexbox 布局，我无法弄清楚我的情况是什么原因......我用默认的 flexbox 模板进行了试用“..工作，我缩小了CSS，剥离了样式等等......成功..但是！..我需要的正是我所做的，并且无法将其整理出来..所以..重复“技术问题”是的.. 但不是解决方案..

我确实测试了你的代码。我还测试了我的解决方案。有效。请参阅我的评论中的演示。

hmm.. 是的.. 我看到你做到了:) 也许我的一些代码（或页面代码）不正确.. 无论如何.. 你知道@Michael_B 我是怎么做到的可以让它像桌面时最多 4 个响应，而在移动设备上每行只有 1 个？

感谢@Michael_B 的帮助 :) 终于对这个 flexstuff 有了更多的了解。。与 Bootstrap 网格 col 和 row 的关系太“挂钩”了。但是 flexbox 更“灵活”一点？呵呵:)

【参考方案1】：

我认为这两个设置和从.foodbox 中删除width 应该可以解决问题，因为.foodbox 元素不是弹性项目，而是弹性项目的孩子：

.buttons > * 
  width: 20%;

.buttons > * > *
  width: 100%;
  text-align: center;

https://jsfiddle.net/yuwhpgrn/2/

【讨论】：

感谢 3 个很棒的答案，伙计们！......虽然他们都解决了这个问题，但我发现 @Johannes 解决方案最简单，无需为食物盒元素本身设置指定宽度...... :) 谢谢！

【参考方案2】：

您可以为 asp:LinkBut​​ton 元素添加宽度，例如：

[runat]
   width: calc(100% / 5);

【参考方案3】：

这似乎可以通过在带有溢出的“食物盒”上应用固定宽度来解决：隐藏。我取消了'break-word'并将内容居中：

.buttons 
  display: flex;


.buttons > a 
  margin: 0 5px;


.food-box 
  flex: 1;
width: 200px;
overflow: hidden;
  position: relative;
  background-color: white;
  min-height: 300px;
  background-color: #ffffff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  word-wrap: break-word;
  margin: 0 !important;
  padding: 0 !important;


.food-box .food-box-image 
  position: absolute top: 0 left: 0;
  background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
  background-size: cover;
  width: 100%;
  min-height: 150px;
  background-color: red;


.food-box .food-box-content 
  position: absolute bottom: 0 left: 0;
/* word-wrap: break-word; */
text-align: center;
  width: 100%;
  min-height: 150px;
  background-color: #e25822;
  color: #fff;
  font-size: 70%;
  padding-top: 60px;
  padding-left: 5px;
  padding-right: 5px;


.food-box .food-box-badge 
  display: table;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  padding-left: 10px;
  padding-right: 10px;


.food-box .food-box-badge span 
  color: #666;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em;
  word-wrap: break-word;

https://jsfiddle.net/zornfett/8r4L2c3r/

【讨论】：

谢谢@zornfett.. 应该已经注意到了，但尽量避免为食物盒指定一个恒定的宽度:) 谢谢！