【CSS】精简代码实现自适应！学到了！

前言

大家是不是对css有共同的感觉就是，调这里那里不行，调那里这里又不行。。。
今天学习了一个很神奇的方法，自适应！迫不及待想分享。只能说还是要靠积累，学以致用。

正文

先来个列表

<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>

没有加样式之前它长这丑样

下面我们来为它添加神奇的样式

.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;
}

马上效果就出现了



分析(每一句都要它独特的用处！)

.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 */
}

总结

慢慢积累，加油！