两栏布局：左边宽度固定，右边自适应 <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; }
效果：
三栏布局：两边宽度固定，中间宽度自适应 <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;}
效果：
总结：
flex布局默认不改变项目的宽度改变项目的高度，如果项目没有显示指定高度，就将占据容器的所有高度flex-grow：定义容器的放大比例，默认为0，即如果存在剩余空间也不放大。如果所有项目的flex-grow：1，则表示所有项目的放大比例相同，如果有一个项目的flex-grow：2，则表示该项目的放大比例是其他项目的2倍flex-shrink：定义项目的缩小比例，默认为1，即空间不足该项目将缩小。如果所有项目的flex-shrink：1，则表示空间不足时，所欲项目等比例缩小，如果一个item的flex-shrink：0，其余为flex-shrink：1，则前者空间不足时，不缩小flex-basis：定义了分配剩余空间之前，项目占据的主轴空间。浏览器根据这个属性计算是否有剩余空间，默认值为auto，即项目本来的大小
参考链接：
flex布局教程-dddyd
flex实例-zqdmht博客