在较小的屏幕尺寸上控制弹性框

Question

我正在尝试学习如何使用Flexbox。我在这里做了一个例子：

/* Grid */

.column {
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

<div class="row">
  <div class="column">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column">
    Column 4 - 33.3%
  </div>
  <div class="column">
    Column 5 - 33.3%
  </div>
  <div class="column">
    Column 6 - 33.3%
  </div>
</div>

因此，上面的flexboxes正在按我的意愿> 800px工作。下面是当屏幕尺寸为< 800px时我希望网格如何显示的图像。 但是我不知道如何在CSS中做到这一点？。我希望有人能学到我做这件事的好方法。

目前，Flexbox只能在移动设备上使用全角，我想对移动设备上的布局有更多的控制权，因此布局在< 800px上看起来像这样：

Answer 1

在这些列中添加flex-basis或flex，这是工作代码（确保视口宽度大于800px）：

// add these with along with corresponding markup in HTML.
  .col-12 {
    flex: 100%;
  }
  .col-6 {
    flex: 50%;
  }
  .col-4 {
    flex: 33.3%;
  }

jsfiddle：https://jsfiddle.net/bytprgwm/

或直接代码段：

/* Grid */

.column {
  flex-basis: 100%;
}


@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
  .col-12 {
    flex: 100%;
  }
  .col-6 {
    flex: 50%;
  }
  .col-4 {
    flex: 33.3%;
  }

}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

<div class="row">
  <div class="column col-12">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column col-6">
    Column 2 - 50%
  </div>
  <div class="column col-6">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column col-4">
    Column 4 - 33.3%
  </div>
  <div class="column col-4">
    Column 5 - 33.3%
  </div>
  <div class="column col-4">
    Column 6 - 33.3%
  </div>
</div>

结果：

Answer 2

这将是我的解决方案：

.column {
  flex-basis: 100%;
}

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .column {
    flex: 1;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  .special{
    min-width: calc(100% - 40px);
  }
}

<div class="row">
  <div class="column">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column">
    Column 4 - 33.3%
  </div>
  <div class="column">
    Column 5 - 33.3%
  </div>
  <div class="column special">
    Column 6 - 33.3%
  </div>
</div>

Answer 3

如果您想使用flex，则需要添加一些类并在calc()上进行一些flex-basis来解决利润问题-同时使用{{1} }选择器。

使用网格是更好的方法，但这是一个灵活的解决方案。

nth-child

/* Grid */

* {
  box-sizing: border-box;
}

.column {
  flex-basis: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 799px) {
  .row {
    flex-wrap: wrap;
  }
  .row.two .column {
    flex: 0 0 calc(50% - 6px);
  }
  .row.two .column:nth-child(1) {
    margin-right: 6px;
  }
  .row.two .column:nth-child(2) {
    margin-left: 6px;
  }
  .row.three .column {
    flex: 0 0 calc(50% - 6px);
  }
  .row.three .column:nth-child(1) {
    margin-right: 6px;
  }
  .row.three .column:nth-child(2) {
    margin-left: 6px;
  }
  .row.three .column:nth-child(3) {
    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

Answer 4

最简单的方法是使用CSS Grid布局，我已在稍后的答案中包括了它。但是，首先是flex布局。

不过，我已经修改了您的HTML，因为没有.row()包装器元素会更容易。还要注意，我使用的是500px的最小和最大宽度，而不是800px；这只是为了在Stack Snippet和JS Fiddle演示中更轻松地演示；如果您用自己喜欢的宽度替换演示中的宽度，则它们对于这些宽度的作用将相同。

/* For screens less than 500px in width: */

@media screen and (max-width: 500px) {
  .cell1,
  .cell6 {
    /* here we want these elements to grow to a
       size twice that of their siblings, not to
       shrink at all and be 100% wide minus the
       doubled width of the margin (we use a CSS
       custom property to set the margin on the
       elements) */
    flex: 2 0 calc(100% - var(--margin) * 2);
  }
  .cell2,
  .cell3,
  .cell4,
  .cell5 {
    /* The remaining cells are all set to neither
       grow nor shrink, and their flex-basis is
       50% minus the calculated width of the
       margins in order to allow two elements
       per row: */
    flex: 1 0 calc(50% - var(--margin) * 2);
  }
}
/* for screens larger than 500px width: */
@media screen and (min-width: 500px) {
  .cell1 {
    /* This element is up to three times
       the size of its siblings, does not
       shrink in relation to them and has
       a flex-basis of 100% minus the width
       of the margins: */
    flex: 3 0 calc(100% - var(--margin) * 2);
  }
  .cell2,
  .cell3 {
    /* two elements per 'row': */
    flex: 2 0 calc(50% - var(--margin) * 2);
  }
  .cell4,
  .cell5,
  .cell6 {
    /* three elements per 'row': */
    flex: 1 0 calc(33.3% - var(--margin) * 2);
  }
}


/* to force widths to be more consistently applied
   between different element-types and browsers: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* the declaration of the --margin
     custom property used in the @media
     rules; allowing changes to be made
     in only one place: */
  --margin: 5px;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.flex {
  /* using flex-layout: */
  display: flex;
  justify-content: space-between;
  /* allowing elements to wrap within
     the flex container: */
  flex-wrap: wrap;
}

.cell {
  padding: 15px;
  border: 1px solid #666;
  background: #343436;
  /* using the --margin custom property
     to set the margins of the elements:*/
  margin: var(--margin);
}

<div class="flex">
  <!-- what you were calling 'columns' were cells within
       a column; therefore I've adjusted both the text
       and the HTML itself; here the common class for
       all elements within the container is 'cell' for
       shared styles, and each cell can be targeted
       by its position; I used classes instead of id
       in case you have multiple flex-layouts within
       the same document with the same style: -->
  <div class="cell cell1">cell 1</div>
  <div class="cell cell2">cell 2</div>
  <div class="cell cell3">cell 3</div>
  <div class="cell cell4">cell 4</div>
  <div class="cell cell5">cell 5</div>
  <div class="cell cell6">cell 6</div>
</div>

JS Fiddle demo。

但是，对于CSS Grid：

/* For various screen sizes we update the CSS
   custom properties: */
@media screen and (min-width: 500px) {
   :root {
    --columns: 6;
    --gridAreas:
        "one one one one one one"
        "two two two three three three"
        "four four five five six six";
  }
}

@media screen and (max-width: 500px) {
   :root {
    --columns: 2;
    --gridAreas:
        "one one"
        "two three"
        "four five"
        "six six";
  }
}

@media screen and (max-width: 200px) {
   :root {
    --columns: 1;
    --gridAreas:
        "one"
        "two"
        "three"
        "four"
        "five"
        "six";
  }
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.grid {
  /* using CSS grid layout: */
  display: grid;
  grid-gap: 5px;
  /* defining the number of columns in the grid,
     as defined in the relevant @media rule: */
  grid-template-columns: repeat(var(--columns), 1fr);
  /* using the --gridAreas custom property to
     determine the grid template and its named
     areas: */
  grid-template-areas: var(--gridAreas);
}

.cell {
  padding: 15px;
  border: 1px solid #666;
  background: #343436;
}

/* defining the grid-area into which
   each element will be placed: */
.cell1 {
  grid-area: one;
}

.cell2 {
  grid-area: two;
}

.cell3 {
  grid-area: three;
}

.cell4 {
  grid-area: four;
}

.cell5 {
  grid-area: five;
}

.cell6 {
  grid-area: six;
}

<div class="grid">
  <div class="cell cell1">cell 1</div>
  <div class="cell cell2">cell 2</div>
  <div class="cell cell3">cell 3</div>
  <div class="cell cell4">cell 4</div>
  <div class="cell cell5">cell 5</div>
  <div class="cell cell6">cell 6</div>
</div>

参考文献：

• calc() function。
• CSS Custom Properties。
• display。
• flex。
• flex-basis。
• flex-grow。
• flex-shrink。
• gap (grid-gap)。
• var() function。

参考书目：

• “ A Complete Guide to Grid，” CSS技巧。
• “ A Complete Guide to Flexbox，” CSS技巧。
• “ Basic concepts of flexbox”，MDN。
• “ CSS Grid Layout”，MDN。

Answer 5

结果

---

HTML

A

CSS

<div class="row">
  <div class="column column1">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column column2">
    Column 2 - 50%
  </div>
  <div class="column column3">
    Column 3 - 50%
  </div>
</div>

<div class="row last-row">
  <div class="column column4">
    Column 4 - 33.3%
  </div>
  <div class="column column5">
    Column 5 - 33.3%
  </div>
  <div class="column column6">
    Column 6 - 33.3%
  </div>
</div>

演示

https://codepen.io/wilsonbalderrama/pen/eYmgyNV

Answer 6

我会更改布局，以便只有一行，然后可以使用引导程序样式类根据屏幕大小来更改列的宽度：

/* Grid */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.column {
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column-50-desktop {
    width: calc(50% - 5px);
  }
}


/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
  box-sizing: border-box;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

<div class="row">
  <div class="column">
    Column 1 - 100%
  </div>
  <div class="column  column-50-desktop">
    Column 2 - 50%
  </div>
  <div class="column column-50-desktop">
    Column 3 - 50%
  </div>

  <div class="column column-50-desktop">
    Column 4 - 50%
  </div>
  <div class="column column-50-desktop">
    Column 5 - 50%
  </div>
  <div class="column">
    Column 6 - 100%
  </div>
</div>

如果您想要当前的标记，则需要在媒体查询中做更多的事情：

/* Grid */

.column {
  flex-basis: 100%;
}

@media screen and (max-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
  }
  .row:nth-child(2) .column {
     flex-basis:calc(50% - 5px);
  }
  .row:nth-child(3) .column {
     flex-basis:calc(50% - 5px);
  }
  .row:nth-child(3) .column:last-child {
     flex-basis:100%;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
  box-sizing:border-box;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

<div class="row">
  <div class="column">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column">
    Column 4 - 50%
  </div>
  <div class="column">
    Column 5 - 50%
  </div>
  <div class="column">
    Column 6 - 100%
  </div>
</div>