laravel 圣杯布局

最新推荐文章于 2024-09-11 15:13:15 发布

海绵里没有宝宝

最新推荐文章于 2024-09-11 15:13:15 发布

阅读量772

点赞数

文章标签： php 前端 html laravel

本文链接：https://blog.csdn.net/m0_61090178/article/details/124130281

版权

本文介绍了一种利用Flex布局实现的圣杯布局方案，包括header、footer、左侧、中间和右侧的内容区域。代码示例展示了如何设置CSS样式以达到预期效果，其中`flex-grow`、`order`属性是关键。此外，还提供了一个子模板继承示例，用于展示内容填充。

摘要由CSDN通过智能技术生成

圣杯布局

<body>
     <header>header</header>
     <div class="flex-box" >
        <div class="flex-left">@yield('left')</div>
        <div class="flex-center">@yield('text')</div>

        <div class="flex-right">@yield('right')</div>
     </div>
     <footer>footer</footer>
</body>

继承

@extends('layout.shengbei')
@section('title','添加用户')
@section('content')
<x-alert ></x-alert>

@parent
@endsection

圣杯样式

<style>
   * {
       color: #fff;
       text-align: center;

   }
   header {
       background-color: lightblue;
       height: 150px;
       width: 100%;
        line-height: 150px;
        color:black;
   }
   .flex-box {
       display: flex;
   }
   .flex-center {
       background-color:#DCB5FF;
       flex-grow: 1;
       height: 400px;
       width: 50px;
        line-height: 400px;
   }
   .flex-left {
       background-color: 		#81C0C0;
       order: -1;
       flex: 0 0 100px;
       height: 400px;
       width: 50px;
        line-height: 400px;

   }
   .flex-right {
       background-color: 		#C1FFE4;
       flex: 0 0 100px;
       height:400px;
       width: 50px;
        line-height: 400px;
   }
   footer {
       background-color: 	#E0E0E0;
       height: 150px;
       width: 100%;
        line-height: 150px;
        color:black;
   }
</style>