[CSS] ¡Optimice el código para lograr la autoadaptación! ¡aprendió!

Prefacio

¿Tiene un sentimiento común sobre CSS? . .
Hoy aprendí un método muy asombroso, ¡adaptativo! No puedo esperar para compartir. Solo se puede decir que debemos confiar en la acumulación y aplicar lo aprendido.

texto

Primero viene una lista

<div class="main">
	<ul>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	    <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
	  <li>
	      <h2>Hi!</h2>
	  </li>
      <li>
          <h2>Hi!</h2>
      </li>
	</ul>
</div>

Se ve feo antes de

agregar el estilo. Ahora agreguemos un estilo mágico.

.main {
    
    
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
ul {
    
    
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}
li {
    
    
  flex-grow: 1;
  flex-basis: 200px;
  text-align: center;
  padding: 30px;
  border: 1px solid #333;
  margin: 10px;
}

El efecto apareció de inmediato.



Análisis (¡cada oración tiene su uso único!)

.main {
    
    
    width: 100%; /* 主体容器的宽度为100% */
    max-width: 1200px;/* 最大宽度为1200px */
    margin: 40px auto;/* 外边距上下40px，左右auto */
    padding: 0 20px;/* 内边距上下为0，左右20px */
    box-sizing: border-box;/* box-sizing就不用计算padding */
}

ul {
    
    
    display: flex;/* li在一行显示 */
    flex-wrap: wrap;/* 让内容不超出main容器 */
    list-style-type: none;/* 设置li的标记样式为无标记 */
    padding: 0;/* 取消父元素的padding值 */
}

li {
    
    
    flex-grow: 1;/* 如果一行只有一个，就会撑满整行，如果是有两个就两个撑满整行 */
    flex-basis: 200px;/* 原本的宽度为内容撑开的宽度，后属性用于设置或检索弹性盒伸缩基准值为200px，也就是说，页面从上一次变化到下一次变化浏览器宽度变化200px */
    text-align: center;/* 内容居中，可不用自定义 */
    padding: 30px;/* 内边距30px */
    border: 1px solid #333;/* 设置边框样式 */
    margin: 10px;/* 外边距都是10px */
}

para resumir

¡Acumula lentamente, vamos!