Question

我正在尝试使用Flexbox在CSS中进行多列布局。对于1025px或更高的屏幕，我希望它是3列的布局。屏幕宽度在720像素到1025像素之间，我希望只有2列。我已经尝试了多种方法来实现此目的，但似乎只能创建所需的3列。这是我用来创建3列的代码：

.deals {
  text-align: center;
}

.deal {
  flex-basis: 100%;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 720px) {
  /* columns for home page */
  .deals {
    display: flex;
    flex-direction: row;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>

Answer 1

如果您要搜索“列”布局，那么这似乎很适合CSS Grid Layout。

这是这里的重要内容：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

要分解它：

显示：网格； 给我们一个网格容器

grid-template-columns: 定义网格的列行为

repeat( ... , ... ); 用于为列或行（此处为列）定义模式的功能。第一个参数是重复次数-固定或自动-第二个参数是我们的值   想重复。

（自动调整，minmax(200px, 1fr)） auto-fit将列数优化到容器的最小和最大约束。这里   与minmax()函数一起使用，我们定义了最小列   宽度为200像素，否则请均匀分配可用宽度。玩这个。

.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}

.deal img {
  width: 80%;
  height: 80%;
}

<div class="deals">

  <div class="deal">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>

Answer 2

对于小屏幕，将元素flex-basis设置为40％。这样便得出了每行2的项目总数。（33％到49％之间的任何数字都可以）。

在媒体查询中，将它们设置为30％（33到25之间的任何数字都可以）。

要将最后一项移到左侧，请添加2个空元素

.deals {
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.deal {
  flex-basis: 40%;
  flex-grow: 1;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 1025px) {
  /* adjust to 3 columns */
  .deal {
    flex-basis: 30%;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

  <div class="deal"></div>
  <div class="deal"></div>

</div>

Answer 3

我想那就是你想要的。

.deals {
  text-align: center;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.deal {
  width:100%;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 720px) and (max-width:1025px) {
  .deals {
  grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px) {
  /* columns for home page */
  .deals {
    display: grid;
    grid-template-columns:1fr;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>

如何使用CSS flexbox制作包含图像的列？

3 个答案: