Flex布局技巧详解-优快云博客

本文深入探讨了使用Flex布局实现各种复杂网页布局的技巧，包括单行居中、动态导航栏、三栏固定与自适应、流式布局及圣杯布局等，为前端开发者提供了实用的代码示例和布局解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex应用

单行居中

<div class="wrapper">
     <div class="content"></div>
 </div>
 ----------------------------------
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    resize: both;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.content{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

在这里插入图片描述

可动态增加的导航栏

<div class="wrapper">
     <div class="content">天猫</div>
     <div class="content">淘宝</div>
     <div class="content">聚划算</div>
 </div>
 --------------------------------------
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 300px;
    height: 200px;
    border: 1px solid black;
    display: flex;
}
.content{
    /* flex-grow:1 flex-shrink:1 flex-basis:auto */
    flex: 1 1 auto;
    height: 40px;
    color: #f20;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
}
.content:hover{
    background-color: #f20;
    color:#fff;
}

在这里插入图片描述

三栏布局，中间固定，两边自适应

 <!-- 三栏布局，中间固定，两边自适应 -->
<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
-----------------------------------
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    resize: both;
    overflow: hidden;
    width: 300px;
    height: 200px;
    display: flex;
    border: 1px solid black;

}
.content{
    flex: 1 1 auto;
    height: 120px;
    border: 1px solid green;
}
.content:nth-of-type(2){
    flex: 0 0 30px;
}

在这里插入图片描述

流式布局

 <!-- 流式布局 -->
<div class="wrapper">
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
    <div class="contetn"></div>
</div>
    ---------------------------------
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 400px;
    height: 800px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.contetn{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
}

在这里插入图片描述

圣杯布局

<!-- 圣杯布局 -->
<div class="wrapper">
   <div class="header"></div>
   <div class="contain">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div>
   <div class="footer"></div>
</div>
---------------------------------------
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    resize: both;
    overflow: hidden;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}
.header,.footer,.right,.left{
    flex: 0 0 20%;
    border: 1px solid red;
    box-sizing: border-box;
}
.contain{
    flex:1 1 auto;
    display: flex;
    border: 1px solid red;
}
.center{
    flex: 1 1 auto;
    border: 1px solid red;
}

在这里插入图片描述