单个部分上的 Flexbox

Posted 2023-03-06

【中文标题】单个部分上的 Flexbox

【英文标题】：Flexbox on a single section

【发布时间】：2020-09-24 22:50:21

【问题描述】：

我的所有 html 中都有一个部分，我需要在其中使用弹性框。下面的 CSS 影响了我的 HTML 中的所有行和列。我只需要下面的 CSS 代码来影响我在此处发布的 HTML。

我怎样才能做到这一点？

最好的问候

.row 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;


.row>[class*='col-'] 
  display: flex;
  flex-direction: column;

<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
        <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

【参考方案1】：

使用.bestseller-wrap .row 和.bestseller-wrap .row>[class*='col-'] 作为选择器，只影响该元素中的行和列。

如果您需要将其绑定到部分本身，请将类应用于 HTML 中的部分并使用该类而不是 .bestseller-wrap

.bestseller-wrap .row 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;


.bestseller-wrap .row>[class*='col-'] 
  display: flex;
  flex-direction: column;

<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
        <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的帮助

【参考方案2】：

只需添加一个类！

.section-headline .row 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;


.section-headline .row>[class*='col-'] 
   display: flex;
   flex-direction: column;

<div class="section section-headline">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
         <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

<div class="row">
  <h5>A different row</h5>
</div>