html - 在较小的屏幕尺寸上控制 flexbox

Question

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

/* 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 中做到这一点？。我希望有人能教我一个好的方法。

目前 flexboxes 将在移动设备上占据全 Angular ，我想对移动设备上的布局有更多的控制，所以 < 800px 上的布局看起来像这样:

Answer 1

因为最简单的方法是使用 CSS 网格布局，所以我在后面的答案中包含了它。不过，首先是 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 网格:

/* 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。