CSS3中display属性的Flex布局-圣杯布局实例

pinecone 发布于2019-08-29 15:33 / 2875人阅读

摘要：负值对该属性无效。我们通常用到的就是这个属性，在布局的时候会很有用。对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。三圣杯布局布局一直是很重要的知识点，在面试中也会经常遇到，这里就用做一个圣杯布局。

一，为什么写这篇文章

在很早之前就接触display：flex布局，尤其是不考虑低版本浏览器兼容之后，就开始肆无忌惮的使用了。之前做pc端的时候，要求兼容到ie8，也不会注意到它。后来做移动端，第一次看到display：flex，还是从一个实习生的代码里，然后查了查资料，居然是这么方便。

简单的使用及原理请查看阮一峰大神的讲解。

二.基本使用

父元素

{
    display:flex;
}

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

可以有6个属性可以设置，具体不再细说。

子元素

{
    flex:none | auto; /* default auto */
}

/* 1表示该元素撑满剩余空间 */
{
    flex:1
}

我主要想说的是子元素的flex属性，刚接触时确实不好理解。理解了这个就可以实现左固定右自适应的这种布局，通常出现在列表显示的时候。网上还通常见到flex：1 |none|auto 的这种写法，就是下面这几个属性在作祟。

每个子元素也称为 “项目”，属性值有:

1、order //定义各个子元素的排列顺序，数值越小，排列越靠前，默认为0，可为负数

     .item{
         order:-1;/* 任意数字 */
     }

2、flex-grow //定义子元素的放大比例，默认为0（不放大），前提是父容器有空余空间

    
    .item{
         flex-grow: ; /* default 0 */
     }

3、flex-shrink //如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

    
    .item{
         flex-shrink: ; /* default 1 */
     }

4、flex-basis //在子元素分配空余空间前，设定指定的子元素的空间大小，默认auto（原值）

    
    .item{
         flex-basis:  | auto; /* default auto */
     }
    /* 可以设置60% 或者 200px */

5、flex //是flex-grow、flex-shrink、flex-basis的组合，默认值flex:0 1 auto;

    
    .item{
         flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
     }
     /* 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) */
     /* 建议优先使用这个属性，而不是多带带写三个分离的属性，因为浏览器会推算相关值 */

6、align-self //允许单个子元素与其他子元素不一样的对齐方式，可以覆盖父元素设定的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同stretch（填充满）。

    
    .item{
         align-self: auto | flex-start | flex-end | center | baseline | stretch;
     }

我们通常用到的就是这个flex属性，在布局的时候会很有用。

对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。

三.圣杯布局

layout布局一直是css很重要的知识点，在面试中也会经常遇到，这里就用flex做一个圣杯布局。

css

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
        flex-direction:column;
    }
    .header,.footer{
        flex: 0 0 80px;
        background-color: #7dbcea;
    }
    .container{
        flex: auto;
        background-color: #145d9c;
        display: flex;
    }
    .container .left,.container .right{
        flex: 0 0 200px;
        background-color: #3a90ce;
    }
    .container .main{
        flex: auto;
        background-color: #145d9c;
    }

html

云服务器 GPU云服务器圣杯布局 flex布局 java中各种布局 display属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113392.html

结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...

RobinQu 2019-08-02 13:55 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可...

Meathill 2019-04-29 15:35 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...

Magicer 2019-08-30 15:54 评论0 收藏0