Question

我有媒体查询，以对齐项目

600px以上：

colL, colC, colR in one line, 

and pck2 on the second line,

低于600px：

colL, colC in one line, 

and colR on the second line, 

and pck2 on the third line.

我通过将flex row容器设置为wrap并通过设置每个项目的宽度来规范此操作。 600px colR : 25vw以上，600px colR : 100vw以下。

<!DOCTYPE html>
<html>
    <head>
        <style>

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

    body {
      width: 100%; }


    .indexImg {
        position: absolute;
        top:0; left:0;
        width : 100%; 
    }

    .cont {

        display: flex; /* container */
        flex-direction: row;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: space-around; /* main axia : flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: space-around; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
    }

    .colL, .colR, .colC, .pck2 {
        display: flex; /* container */
        flex-direction: column;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: flex-start; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
        padding: 2vw;
    }



    .colL { background : yellow; }
    .colR { background : blue; }
    .colC { background : green; }
    .pck2 { background : pink; }

    @media only screen and (max-width: 499px) {
        .cont, .colL, .colR, .colC, .pck2 { width : 100vw; }
        /* colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } */
    }

    @media only screen and (max-width: 500px) and (min-width: 599px) {
        .colC, .colL { width : 50vw; }
        .cont, .colR, .pck2  { width : 100vw; }
        /* .colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } */
    }


    @media only screen and (min-width: 600px) {
        .colL, .colR { width : 25vw; }
        .colC { width : 50vw; }
        .cont, .pck2  { width : 100vw; }
    }


        </style>
    </head>
    <body>
        <div class="cont" >

            <div class="colL" >
                <div class="f_g1 f_c3" >item 1</div>
                <div class="f_g1 f_c3" >item 2</div>
            </div>
            <div class="colC" >
                <div class="f_g1 f_c3" >img</div>
            </div>
            <div class="colR" >
                <div class="f_g1 f_c3" >item 3</div>
                <div class="f_g1 f_c3" >item 4</div>
            </div>

            <div class="pck2" >
                <div class="f_g1 f_c3" >item 5</div>
                <div class="f_g1 f_c3" >item 6</div>
            </div>

        </div>


    </body>
</html>

Answer 1

您的媒体查询中存在一些错误，因此在500到600px之间存在差距。

@media only screen and (max-width: 500px) and (min-width: 599px)应该@media only screen and (min-width: 500px) and (max-width: 599px)

您还可以删除@media only screen and (max-width: 499px)查询，以确保始终存在回退，这种情况会发生。

Answer 2

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box; }

    body {
      width: 100%; }


    .indexImg {
        position: absolute;
        top:0; left:0;
        width : 100%; 
    }

    .cont {

        display: flex; /* container */
        flex-direction: row;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: space-around; /* main axia : flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: space-around; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
    }

    .colL, .colR, .colC, .pck2 {
        display: flex; /* container */
        flex-direction: column;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: flex-start; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
        padding: 2vw;
    }



    .colL { background : yellow;  }
    .colR { background : blue; }
    .colC { background : green; }
    .pck2 { background : pink; }

     /*@media only screen and (max-width: 499px) {
        .cont, .colL, .colR, .colC, .pck2 { width : 100vw; }
        colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } 
    }*/

   @media only screen and (min-width: 500px) and (max-width: 599px){
        .colC, .colL { width : 150vw; }
        .cont, .colR, .pck2  { width : 100vw; }
        /* .colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } */
    }


    @media only screen and (min-width: 600px) {
        .colL, .colR { width : 25vw; }
        .colC { width : 50vw; }
        .cont, .pck2  { width : 100vw; }
    }

<!DOCTYPE html>
<html>
    <head>
        <style>

 


        </style>
    </head>
    <body>
        <div class="cont" >

            <div class="colL" >
                <div class="f_g1 f_c3" >item 1</div>
                <div class="f_g1 f_c3" >item 2</div>
            </div>
            <div class="colC" >
                <div class="f_g1 f_c3" >img</div>
            </div>
            <div class="colR" >
                <div class="f_g1 f_c3" >item 3</div>
                <div class="f_g1 f_c3" >item 4</div>
            </div>

            <div class="pck2" >
                <div class="f_g1 f_c3" >item 5</div>
                <div class="f_g1 f_c3" >item 6</div>
            </div>

        </div>


    </body>
</html>

css3，flex，项目而不是换行到下一行，得到最小化并以单行对齐

2 个答案: