Flex网格无法调整@media查询的大小 [英] Flex grid not resizing for @media queries

问题描述

我无法弄清楚为什么使用@media查询时我的4列(弹性框)网格无法调整大小.我的代码在这里: https://jsfiddle.net/mrknz4a3/

I cannot figure out why my 4 column (flexbox) grid doesn't resize when using @media queries. I have my code here: https://jsfiddle.net/mrknz4a3/

.flexgrid-wrapper {
    width: 100%;
    border-collapse: collapse;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1% 0;
    margin: 2% 0 0;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    clear: both;
    margin: 0 auto;
    max-width: 100%;
    height: 100%;
    padding: 0;
}

.col_3 {
    width: 23%;
    margin: 0 2.7% 2.5% 0;
    float: left;
    word-break: break-word;
    background: pink;
}

要更改布局，我一直在使用以下代码，但布局保持完全相同.我希望平板电脑/iPad的布局为2列，而智能手机的布局为1列:

To change the layout I've been using the following code but the layout stays exactly the same. I want a 2 column layout for tablets/iPad and 1 column for smartphones:

/* iPad portrait */
@media  screen and (min-width: 641px) and (max-width: 959px) {
  .col_3 { width: 48.5%; }
}

/* Smartphones */
@media  screen and (max-width : 480px), /* Portrait */
            screen and (max-width : 640px) /* Landscape */ {

  .col_3 { width: 100%; margin-right:0; }

}

推荐答案

考虑将flex-wrap: wrap添加到伸缩容器(.row). Flex容器的默认设置为flex-wrap: nowrap，所有flex项目将保留在同一行.

Consider adding flex-wrap: wrap to your flex container (.row). The default setting for a flex container is flex-wrap: nowrap and all flex items will stay on the same line.

5.2.柔性线包装:flex-wrap 财产

flex-wrap属性控制flex容器是否为 单线或多线，以及交叉轴的方向， 确定新行的堆叠方向.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

nowrap (初始值)

nowrap (initial value)

flex容器是单行.

The flex container is single-line.

包装

wrap

flex容器是多行的.

The flex container is multi-line.

_{来源: https://www.w3.org/TR/css- flexbox-1/#flex-wrap-property}

_{source: https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property}

---

分别在flex容器中使用float和clear属性.请注意，这些属性将被忽略，可以安全地删除.

---

Separately, you are using float and clear properties in your flex container. Note that these properties are ignored and can be safely removed.

3. Flex容器:flex和inline-flex显示 值

3. Flex Containers: the flex and inline-flex display values

flex容器为以下内容建立新的 flex格式设置上下文 它的内容.这与建立块格式相同 上下文，除了使用flex布局而不是块布局: 浮动对象不会侵入flex容器，而flex 容器的边距不会随其内容的边沿而塌陷.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout: floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

• float和clear对弹性项目没有影响，也不会使其失效.

• float and clear have no effect on a flex item, and do not take it out-of-flow.

_{来源: https://www.w3.org/TR/css-flexbox- 1/#flex容器}

_{source: https://www.w3.org/TR/css-flexbox-1/#flex-containers}

这篇关于Flex网格无法调整@media查询的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！