flex 实现两栏、三栏和平均布局

  <header class='header'>
    <div class="logo">
      <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbcd58c08aba499dbd0cb8224db9a1b8~tplv-k3u1fbpfcp-zoom-1.image">
    </div>
    <ul>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <main>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </main>
  <div class="imagelist">
    //为了实现平均布局，必须嵌套一层 inner
    <div class="inner">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>
  
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul,ol{
  list-style:none;
}

// 两栏布局
.header{
  display:flex;
  border:1px solid black;
  //justify-content:space-between;
  align-items:center;
}

.logo{
  display:flex;
  align-items:center;
}

img{
  max-width:40px;
  vertical-align:middle;
}

ul{
  display:flex;
  /* 推荐用 margin-left:auto ，和 justify-content:space-between 效果一样 */
  margin-left:auto;
}

ul>li{
  line-height:32px;
}

// 三栏布局
main{
  width: 800px;
  display:flex;
  margin-left:auto;
  margin-right:auto;
}
.left{
  width:200px;
  background-color:black;
}
.content{
  background-color:grey;
  height: 400px;
  flex-grow:1;
}
.right{
  width:100px;
  background-color:black;
}

//平均布局
//父元素 800，子元素 （191+12）*4=812，超出 12 px ,所以 Inner 的 margin 为 -12/2 px，此时 Inner 的 width = 812 px;
.imagelist{
  width: 800px;
  margin-right:auto;
  margin-left:auto;
}
.imagelist > .inner{
  display:flex;
  flex-wrap:wrap;
  margin:0 -6px;
}

.image{
  height: 190px;
  width: 191px;
  background-color:grey;
  border:1px solid red;
  margin:10px 6px; 
}

float 实现两栏、三栏和平均布局

border 调试时会占用宽度，可以用 outline 代替 border;

  <header class='header clearfix' >
    <div class="logo">
      <img src="https://static.jsbin.com/images/dave.min.svg">
    </div>
    <ul class='nav clearfix'>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <main class="clearfix">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </main>
  <div class="imagelist">
    <div class="inner clearfix">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>
  
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul,ol{
  list-style:none;
}

.clearfix::after{
  content:"";
  clear:both;
  display:block;
}

//两栏布局
.header{
  border:1px solid black;
}

.logo{
  float:left;
  margin-top:8px;
  margin-left:10px;
  display:inline-block;
}

.logo>img{
  width: 26px;
  vertical-align:middle;
}


.nav{
  float:right;
  margin-left:20px;
  display:inline-block;
}

.nav>li{
  float:left;
  padding:4px 0.5em;
  line-height:32px;
}

//三栏布局
main{
  margin:10px auto;
  width: 800px;
}
.left{
  height: 300px;
  width: 200px;
  float:left;
  background-color:grey;
}
.content{
  background-color:black;
  height: 300px;
  width: 500px;
  float:left;
}
.right{
  background-color:grey;
  height: 300px;
  width: 100px;
  float:left;
}

//平均布局
.imagelist{
  width: 800px;
  margin-left:auto;
  margin-right:auto;
}

.inner{
  outline:1px solid green;
  margin:0 -6px
}

.image{
  border:1px solid red;
  width: 191px;
  height: 191px;
  background-color:#000;
  float:left;
  margin:6px 6px;
}