Home  >  Q&A  >  body text

css3 display:flex

在移动端有三张图片,其中有两张的尺寸是一样的,还有一张要比其它两张小2px
用flex怎么让他们能自适应???

 <p class="flexbox">
            <p>
                <a href="http://m.vmei.com/brand/group/1000284">
                    <img src="http://img01.sephome.com/201512/E99EB7375ADB4E4CB717B30EEF130A61.jpg" alt="" width="100%">
                </a>
            </p>
            <p>
                <a href="http://m.vmei.com/brand/group/1000284">
                    <img src="http://img01.sephome.com/201512/2221C6D38DCF4E3DB0F6D5F5B4A31D1F.jpg" alt="" width="100%">
                </a>
            </p>
            <p>
                <a href="http://m.vmei.com/brand/group/1000421">
                    <img src="http://img01.sephome.com/201512/975A099F4CDE42FAAD13FD89002341A0.jpg" alt="" width="100%">
                </a>
            </p>
        </p>
        
         .flexbox{
            display: flex;
            display: -moz-box;
            display: -webkit-flex;
        }
        .flexbox p{
            float: left;
        }
        .flexbox p:nth-of-type(1),.flexbox p:nth-of-type(3){
            flex:1;
        }
PHP中文网PHP中文网2764 days ago602

reply all(3)I'll reply

  • 阿神

    阿神2017-04-17 11:31:06

    I don’t quite understand~~ Do you want the three pictures to be placed horizontally and equally divided?
    If so, just change it to this:

    .flexbox{
          display: flex;
          display: -moz-box;
          display: -webkit-flex;
     }
      flexbox p{
          float: left;
          flex:1;
     }

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 11:31:06

    The 2px size of the image has nothing to do with flex.
    Flex is applied to the container and each container item. The image only needs to control max-width/max-height.

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 11:31:06

    .flexbox{ 
       display: -webkit-flex;
       display:flex
     } 
    .flexbox p{
     -webkit-flex:1;
     flex:1;
    } 
    .flexbox p:nth-of-type(3){
     padding-left:2px;
    }

    flex does not require float. It is recommended to read the flex tutorial of teacher Ruan Yifeng.

    reply
    0
  • Cancelreply