css-telescopic box layout

Posted May 26, 20201 min read

Telescopic box layout(css3)

  1. Web Page Classification

    1) Fixed content width(wrapper width:1090px) Taobao, NetEase strict selection
    2) Content width adaptive(responsive) Tencent video, iQiyi
    3) Fully responsive H5 webpage [telescopic box]

     Web pages opened on WeChat are fully responsive

Generally used in responsive layout

  1. Concept
    Spindle:the axis in which the telescopic box elements are arranged
    Cross axis:axis perpendicular to the main axis

The telescopic box elements are arranged along the main axis. By default, the distance of the telescopic box elements on the cross axis is 100%, and the distance on the main axis is determined by the content

  1. Application
    Telescopic box container
    display:flex;/Declares the current element as a telescopic box element /
    flex-direction:row;/The main axis is on the x axis /
    flex-wrap:wrap;/when the telescopic box element cannot be placed in the telescopic box container, do you need to wrap?
    justify-content:space-around;/_The arrangement of the telescopic box elements on the main axis
    align-items:stretch;/Arrangement of telescopic box elements on the cross axis /

Telescopic box element
flex-grow:1; //The allocation of the expansion box element to the remaining space of the expansion box container on the spindle, 1 means one share
flex-shrink:1; //Deduction for loss space
flex-basis:100px; //reference value
flex:grow shrink basic; sketch mode