Flex 显示与绝对定位冲突答案

【问题标题】：Flex display conflicts with absolute positioningFlex 显示与绝对定位冲突
【发布时间】：2018-06-10 16:46:35
【问题描述】：

我在div 中有这些按钮，它们的 css 如下：

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;    
}
div.yesno {
    position: absolute;
    bottom: 4vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
}

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

而且没有其他与这些按钮有关的东西。

我的意图是让按钮位于屏幕底部，同时拉伸它们以占据均匀的空间并占据所有空间。问题是，我该怎么做？

【问题讨论】：

列 CSS 可以吗？ codepen.io/gc-nomade/pen/ZXXGBz
是在问我是否愿意将我的按钮一个一个地排列在另一个之上？
不，看看codepen，如果这是你试图做的......我会回答你也可以在这里看到

标签： html css flexbox css-position

【解决方案1】：

将flex-grow属性更改为flex并将100%的width添加到div.IFlexible：

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%}

div {
  font-size: 5vw;
  font-family: Calibri, Helvetica, sans-serif;
}

div.IFlexible {
  display: flex;
  width: 100%; /* added */
}

div.yesno {
  position: absolute;
  bottom: 4vw;
}

div > button {
  font-size: 5vw;
  flex: 1; /* modified */
}

<div class="yesno IFlexible">
  <button id="addNewOK" class="confirmBut">Confirm</button>
  <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

【讨论】：

【解决方案2】：

您也可以使用多列 css https://www.w3.org/TR/css3-multicol/

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    column-count:2;
      
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

你也可以使用 display:grid;

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:4vw
      
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
  
</div>

您实际上只需要调整容器的大小，通过坐标将比宽度更容易：

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;    
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:1vw;
  right:1vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
}

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

【讨论】：

这当然值得注意以备将来参考。感谢您的意见！
@agiro 你也有 display:table/grid 除了 flex
是的，尽管在我观看的教程中（由 Pluralsight 制作）我听说表格不是格式化网站的正确方法。我不知道为什么，但我想如果他们的专家这么说，我宁愿避免学习一些不好的做法。我自己更习惯于 WPF 布局（网格规则），这对我来说是一个全新的世界。据我所知，尽管在这些情况下网格很棒。如果我有足够的技能来理解，我可能会使用它们：D
@agiro 天哪！！ ，显示是 CSS，而不是 HTML 。好的做法是通过 CSS 学习使用适当的标签来表示它们的语义和样式。因此，当您告诉 div 不要显示为块，而是显示为 flex 或 table 或 grid 或 list-item 时......它将永远保持 DIV 和中性......
或者我只是误解了他们所说的话。顺便说一句，您的网格布局刚刚用于另一组元素，所以再次感谢您的分享！

【解决方案3】：

您可以通过为每个按钮指定 50% 的宽度和为它们所在的 div 指定 100% 的宽度来强制按钮占据整个宽度（每个按钮占 50% 的空间）。

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;
    width: 100%;
}
div.yesno {
    position: absolute;
    bottom: 4vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
    width: 50%
}

希望对你有帮助

【讨论】：