用flex实现css经典布局------圣杯布局

最新推荐文章于 2024-05-21 19:43:55 发布

前端图形

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量3.8k

点赞数 3

分类专栏： css 文章标签： flex 圣杯布局

本文链接：https://blog.csdn.net/suandfei/article/details/102758225

版权

圣杯布局：

圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。

首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？

首先flex:1 时是 flex-basis:0 flex-grow:1 flex-shrink:1

好的我们一一来讲下 flex-basis:0 首先代替的是flex项目中的宽度，什么意思呢就是给一个项目中同时设置宽度和 flex-basis 那么这个项目的宽度肯定是按照flex-basis的。flex-grow:1 默认值是0 也就是说他不平分容器中的剩余空间而flex-shrink:1 则是缩放默认值容器的宽度压缩项目也会跟着压缩就是这个意思。
看下面例子：中间那个div 已经实现了自适应了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #father{
   

           height: 100px;
           background-color: #ff0;
           display:flex;
       }
       div.child1{
   
          width: 100px;
          background-color: #369;
       }

最低0.47元/天解锁文章

前端图形

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
用flex实现css经典布局------圣杯布局

圣杯布局：圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？首先flex:1 时是 flex-basis:0 flex-grow:1 flex-shrink:1好的我们一一来讲下 flex-basis:0 首先代替的是flex项目中的宽度，什么意思呢就是给一个项目中同时设置宽度和 flex-basis...
复制链接

扫一扫