Write in the front: Navigation in the mobile end of the network format layout everywhere, how to set the width and height to adapt? How do elements align? How to choose the most efficient code for different scenarios? Smart use of margin, padding and other basic attributes, small skills can solve many problems!

Float layout

1. Scene

Home page navigation layout (no spacing)

2. Page layout

<div class="g-grid">
    <div class="g-grid-item">
      <div class="g-grid-imgWrap">
        <img class="item-img" src="img/g1.png" />
      </div>
      <p class="g-grid-label">Bus ticket and ship ticket</p>
    </div>
    <!-- The following nine sub-elements have the same layout omitted -->
 </div>

3. Style Code

.g-grid {
    text-align: center;
    overflow: hidden; 
    background: #fff;
}
.g-grid-item {
    position: relative;
    float: left; 
    width: 20%;
    padding: 10px 0;
    text-align: center;
}
.g-grid-imgWrap {
    display: inline-block;
    width: 30%; 
    height: 0; 
    padding-bottom: 30%; 
}
.g-grid-imgWrap img {
    width: 100%;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4. Code parsing (height adapting to width)

(1) The parent element g-grid establishes BFC through overflow: hidden, which makes the whole height from 1 to adaptive. Cleafix is usually used to remove floating side effects

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

(2) Subelement g-grid-item floats through float: left attribute, which is also the main attribute of this method.

(3) A common requirement of mobile terminals is that they are highly adaptive to width. Padding-bottom can be used at this time. When width and padding-bottom are equal, width and height are equal (attention should be paid to setting height to 0). To cite one from the other, it can be set in various proportions.

width: 30%; 
height: 0; 
padding-bottom: 30%; 

Extension: vh and vw are the concepts introduced by css to replace the physical size of the display. They can also achieve this effect as a unit. Although compatibility is getting better now, Android 4.4 was not supported before.
vw: 1 vw is equal to 1% of the viewport width.
vh: 1 vh is equal to 1% of the viewport height.

height:1vw;
width:1vw;

Display: inline-block layout

1. Scene

Home page navigation layout (with spacing)

2. Style Code

Page layout is the same as Float layout

.g-grid {
    margin-right: -2%;
    padding: 10px 10px 0;
    font-size: 0;
    background: #fff;
}
.g-grid-item {
    position: relative;
    display: inline-block;
    width: 31.33%;
    padding-bottom: 31.33%;
    margin-right: 2%;
    margin-bottom: 10px;
}
.g-grid-imgWrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 20px;
}
.g-grid-imgWrap img {
    width: 100%;
    height: 100%;
}
.g-grid-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    text-align: center;
}

3. Code parsing (removing the margin-right value of the last element)

(1) g-grid-item settings display: inline-block layout often causes inexplicable gaps between elements. You can make elements and elements closely linked when you write code, but it's not very convenient for us to write code, IDE formatting will automatically separate. It is recommended that the font-size attribute of the parent element g-grid be set to 0 to remove the gap.

(2) Margin-right (or margin-left) is used when the interval between the sub-elements of g-grid-item is needed, and the last line is often set to margin-right (or margin-left) 0. There are the following solutions:

1. Add a margin-right:0 for the last element manually or js
2. Setting margin-right:0 through the pseudoclass nth-child(3n)
3. Set margin-right: -2% on the parent element of g-grid-item; (Recommends this method)

float layout upstairs can also use this method to set gaps

(3) Width and height can be determined not only by setting values, but also by using the following code to achieve width: 100%, height is the parent height minus 20px, and the writing method is determined according to the different scenarios.

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20px;

(4) float layout and display: inline-block layout usually use text-align: center in the middle level; child element in the middle level of parent element requires child element displaying not to be block.

III. Grid Layout

1. Scene

Grid Layout (No Spacing)

2. Page layout

<div class="g-grid">
    <div class="g-grid-item">
      <img class="item-img" src="img/g1.png" />
      <p class="g-grid-label">Bus ticket and ship ticket</p>
    </div>
    <!-- The following eight sub-elements have the same layout omitted -->
 </div>

3. Style Code

.g-grid {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 100px);
    background: #fff;
}
.g-grid-item {
    display: inline-grid;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    align-content: center
    justify-items: center;
}
.g-grid-item:nth-child(3n) {
    border-right: none;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4. Code parsing

(1) The grid layout uses grid-template-columns and grid-template-rows to set several columns and rows.
(2) g-grid-item sets align-content: center to make the sub-elements vertically centered, and justify-items: center to make the sub-elements horizontally centered.

IV. Flex Layout

1. Scene

The layout of the nine palaces (with gaps)

2. Style Code

Page layout is the same as Grid layout. Please enter the code

.g-grid {
    display: flex;
    flex-wrap: wrap;
}
.g-grid-item {
    flex: 0 1 31.33%;
    margin: 0px 1% 10px;
    padding: 1.2rem;
    box-sizing: border-box;
    text-align: center;
    background: #eee;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

3. Code parsing (Flex newline explicit and spacing)

Flex layout uses flex-wrap: wrap; to wrap lines, but when spacing between elements is required, justify-content: space-between cannot be used; reducing one element will become the following figure:

So this example uses margin to set the spacing.

(2). g-grid-item set flex: 0.1.31.33%. This means that the original size of the element is 31.33% of the parent element. When space is insufficient, the element will be reduced and the remaining space will not be enlarged.

When the value is set to flex: 11.31.33%, reducing one element becomes the following figure: