flex布局实现各种布局效果

大家好，欢迎来到IT知识分享网。

1. 两栏布局：左边宽度固定，右边自适应

<div class="container"> 
  <div class="left"></div>
  <div class="right"></div>
</div>

.container { 
   
  display: flex;
  height: 300px;
}
.left { 
   
 flex: 0 0 200px;
 background-color: pink;
}
.right { 
   
  flex: 1 1 auto;
  background-color: grey;
 }

效果：

2. 三栏布局：两边宽度固定，中间宽度自适应

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container { 
   
  display: felx;
  height: 300px;
}
.left { 
   
  flex: 0 0 auto;
  bacground-color: pink;
  width: 200px;
 }
.right { 
   
  flex: 0 0 auto;
  background-color: grey;
  width: 200px;
 }
.main { 
   
  flex: 1 1 auto;
  background-color: skyblue;

效果：

3. 三栏等分布局

 <ul class="container">
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
   </ul>

.container { 
   
  display: flex;
  align-items: center;
  margin: auto;
  padding: 0 10px;
  list-style: none;
  background-color: darkolivegreen;
  width: 500px;
  height: 300px;
}
.item { 
   
  flex: auto;
  margin: 2px;
  background-color: darkred;
  text-align: center;
  line-height: 100px;
  width: 500px;
  height: 100px; 
}

效果：

4. 设置元素水平垂直居中

<div class="container">
    <h3 class="name">香瓜</h3>
    <p class="introduce">
      我就是我颜色不一样的烟火，天空海阔要做最坚强的泡沫</br>
      我就是我颜色不一样的烟火，天空海阔，要做最坚强的泡沫</br>
      我就是我颜色不一样的烟火，天空海阔，要做最坚强的泡沫</br>
      我就是我颜色不一样的烟火，天空海阔，要做最坚强的泡沫</br>
      我就是我颜色不一样的烟火，天空海阔，要做最坚强的泡沫</br>
      我就是我颜色不一样的烟火，天空海阔，要做最坚强的泡沫</br>
    </p>
  </div>

 .container { 
   
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0 auto;
       border: 1px solid blueviolet;
       width: 600px;
       height: 300px;
     }
     .name { 
   
       flex: 0 0 auto;
       text-align: center;
       line-height: 100px;
       width: 100px;
       height: 100px;
     }
     .introduce { 
   
       flex: 1 1 auto;
       padding: 0 5px;
     }

效果：

5. 圣杯布局

 <div class="container">
    <header> header </header>
    <div class="body">
      <aside> left </aside>
      <article> content </article>
      <aside> right </aside>
    </div>
    <footer> footer </footer>
  </div>

.container { 
   
  display: flex;
  flex-direction: column;
}
 div,header,footer { 
   
   text-align: center;
   flex: 1;
}
header { 
   
  background-color: grey;
  line-height: 50px;
}
.body { 
   
  display: flex;
  line-height: 200px;
}
aside { 
   
  flex: 0 0 20% ;
  background-color: pink;
}
article { 
   
  flex: 1 1 auto;
}
footer { 
   
  background-color: grey;
  line-height: 50px;
}

效果：

总结：

1. flex布局默认不改变项目的宽度改变项目的高度，如果项目没有显示指定高度，就将占据容器的所有高度
2. flex-grow：定义容器的放大比例，默认为0，即如果存在剩余空间也不放大。如果所有项目的flex-grow：1，则表示所有项目的放大比例相同，如果有一个项目的flex-grow：2，则表示该项目的放大比例是其他项目的2倍
3. flex-shrink：定义项目的缩小比例，默认为1，即空间不足该项目将缩小。如果所有项目的flex-shrink：1，则表示空间不足时，所欲项目等比例缩小，如果一个item的flex-shrink：0，其余为flex-shrink：1，则前者空间不足时，不缩小
4. flex-basis：定义了分配剩余空间之前，项目占据的主轴空间。浏览器根据这个属性计算是否有剩余空间，默认值为auto，即项目本来的大小

参考链接：
flex布局教程-阮一峰

flex实例-杜小白博客