CSS的两种布局

布局是什么

把页面分成一块一块的，上中下，左中右等排列；

一图流

三种布局

• float
• flex
• grid（这里没说到）

float

步骤

1. 子元素加float: left或者float: right
2. 父元素加clearfix

就是这么简单

flex

首先让一个元素变成容器

然后分为父子关系

container: 是父亲
items: 是儿子

然后我们对于container和items的属性分别做讨论

container

  <style>
    .container {
      display:flex;
      border:1px solid green;
    }
    .item {
      width:50px;
      height:50px;
      border:1px solid red;
    } 
  </style>
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
  </div>

主轴流动方向
flex-direction: row | row-serverse | column | column-serverse

换行：flex-wrap: nowrap | wrap | wrap-reverse

主轴对齐方式:justify-content:（默认主轴对齐方式是横轴）

次轴对齐方式:align-items:

多行内容：align-content:（用的较少）

items
加在儿子上面的属性





flex布局小游戏
grid布局小游戏
学css就是看了没用必须得自己手动打一遍。把上面两个小游戏按照提示有通关了就基本上记住了这两个布局。