flex布局实现三栏布局和水平排列

x20182630

已于 2023-07-06 14:13:16 修改

阅读量1.8k

点赞数 1

文章标签： html css flex css3 html5

于 2021-07-04 21:37:37 首次发布

本文链接：https://blog.youkuaiyun.com/x20182630/article/details/118443274

版权

本文介绍了如何利用CSS3的flex布局创建三栏布局，其中中间栏宽度自适应。通过设置flex-grow属性，使得中间栏在剩余空间中扩展。同时，讲解了水平排列的实现，涉及到flex-wrap、align-content和justify-content属性的使用，详细阐述了这些属性的作用和效果。

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

三栏布局

注：flex中的flex item(子盒子）默认沿着主轴（main axis）排序。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；默认情况下main axis从左指向右。

利用flex布局，中间模块宽度自适应。

其中flex-grow 属性用于设置或检索弹性盒子的扩展比率。当flex父盒子中的flex item即子div，其中间div设为flex-grow:1,其余两个盒子不用设置，flex-grow默认值为0，即一行中被其余两个盒子占据剩下的空间全部分配给中间盒子。

注释：如果元素不是弹性项目，则 flex 属性无效。

<!DOCTYPE html>
<html>
    <head>
<title></title>
<style>
    *{
        height: 100%;
        margin: 0;
    }
      .wrapper{
          width: 100%;
          height: 100%;
        display: flex;
    }
    
   .left{
       width: 300px;
        background-color: blue;
        text-align: center;
    }
    .main{
        background-color: red;
        flex-grow: 1;
        text-align: center;
    }
    .right{
        width: 300px;
        background-color: green;
        text-align: center;
    }
</style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                这是左侧
            </div>  
            <div class="main">这是中间</div>
            <div class="right">这是右侧</div>
</div>
    </body>
</html>

其实现效果如图

水平排列

flex-warp属性定义如果一条轴线排不下，如何换行。

align-centent属性定义项目在交叉轴上如何对齐。

justify-centent属性定义了项目在主轴上的对齐方式。

实现代码如下

<!DOCTYPE html>
<html>
    <head>
<title></title>
<style>
    *{
        height: 100%;
        margin: 0;
    }
      .wrapper{
          width: 100%;
          height: 100%;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;/*默认情况下，项目都排在一条线上，flex-wrap定义，如果一轴线排不下，如何换行*/
        justify-content: space-evenly;/*定义项目在主轴上的对齐方式。*/
    }
    
   .left{
       width: 300px;
        background-color: blue;
        height: 300px;
    }
    .main{
        background-color: red;
        width: 300px;
        height: 300px;
    }
    .right{
        width: 300px;
        background-color: green;
        height: 200px;
    }
    .item{
        height: 200px;
        width: 200px;
        background-color: pink;
    }
</style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
            </div>  
            <div class="main"></div>
            <div class="right"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
</div>
    </body>
</html>

具体效果如下

有关flex布局的具体用法如下