2-6 用flex布局写页面框架

导航

用flex做横向布局很简单，只需要在父元素上加 display:flex 就可以

  <header class="header">
    <div class="logo">
      <img src="https://img-blog.csdnimg.cn/20210403114706585.jfif?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
    </div>
    <ul class="clearfix nav">
      <!--两个名字，css中任意一个选择器均可以使用-->
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>

*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style:none;/*将list前面的小圆点去掉*/
}

img{
  max-width: 100%;/*图片最大宽度不能超过这一行*/
}

.logo{
  display: flex;/*想要图片居中，将其父元素LOGO变为flex*/
  align-items:center;/*对齐方式改为居中*/
}

.logo > img{
  height: 32px;/*LOGO里面的img设定高度，高度在对齐的时候比较好计算*/
  vertical-align: top;/*如果图片下面由多余的东西则用该行代码*/
}

.header{
  display: flex;
  /*想要两个元素变成横向排列，flex只需要在父元素添加此行即可*/
  /*header为 ul和LOGO的父元素*/
  background: grey;
}

ul{
  margin-left: auto;/*将导航文字放到页面右侧，记下来即可*/
  display: flex;/*元素变成横向排列*/
}

ul>li{
  line-height: 32px;
  padding: 4px;/*文字字间距*/
  color: white;
}

内容区

  <div class="content">
    <aside>一行有六个字</aside>
    <main></main>
    <div class="ad"></div>
  </div>

.content{
  display: flex;
  width: 800px;
  margin-left: auto;
  margin-right: auto;/*内容区居中*/
}

.content>aside{
  background: #000;
  width: 200px;/*左右宽度固定*/
}
.content>main{
  background: #666;
  height: 400px;
  flex-grow: 1;/*中间的宽度根据页面调整大小*/
}
.content>.ad{
  background: #999;
  width: 100px;
}

均匀布局

  <div class="imagelist ">
    <div class="x">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>

.imagelist{
  width: 800px;
  margin-left: auto;
  margin-right: auto;/*居中*/
  margin-top: 10px;
}

.imagelist>.x{
  display: flex;/*image元素的父级，使其变横排*/
  flex-wrap: wrap;/*换行*/
  margin-right: -12px;/*负margin，记得去掉border*/
}

.image{
  width: 191px;
  height: 191px;
  background: grey;
  border:1px solid red;
  margin-right: 10px;
  margin-bottom: 10px;
}

注意：不要把宽高写死

• 写死
  width: 100px;
• 不写死
  width: 50%;
  max-width: 100px;
  width:30vw
  min-width: 80%;
  特点：不用px或者使用 min max 前缀