CSS实例详解：Flex布局

Meathill 发布于2019-04-29 15:35 / 3112人阅读

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。

本文由云+社区发表

本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。

一．垂直居中

这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。

1.1用margin实现垂直居中

实现方式：

父元素采用相对定位，子元素采用绝对定位，先将元素的定点定位到父元素的中心，再使用margin负值法，即子元素自身宽度、高度的一半，将其拉回到父元素的中心。

实现效果：

附上完整代码：





    
    垂直居中--normal

1.2用flex实现垂直居中

实现方式：

父元素启用flex布局（display:flex），同时设置主轴上居中对齐（justify-content:center）、交叉轴上居中对齐（align-items:center）。子元素不需要额外设置样式。

实现效果：同上

附上完整代码：





    
    垂直居中--flex

二．圣杯布局

2.1 普通方式实现圣杯布局

在我之前的文章圣杯布局与双飞翼布局中详细介绍过如何实现一个圣杯布局：

(1)中间的三栏布局，这里采用margin负值法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度。

(2)给container设置padding-left和padding-right属性，值分别为左栏、右栏的宽度；

(3)将左右两栏设置为相对定位，同时左栏的left值设为-左栏宽度，右栏的right设为-右栏宽度。

实现效果：

实现代码：





    
    圣杯布局
    



    头部
    
        中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        左栏
        右栏
    
    底部

2.2用flex实现圣杯布局

实现方式：

(1)holyGrail启用flex布局，设置holyGrail中的header、container、footer在交叉轴上竖向排列（flex-direction:column;）

(2)container中的三栏布局：container启用flex布局，设置container中的middle、left、right在主轴上横向排列（flex-direction:row，默认值可以不设）。由于html中先写的middle，所以为了让left在最左边，要设置left的order为这三栏中最小的，即-1（其他两栏order为默认值0）

可以看出Flex布局的实现方式更加简单，也更加直观。

实现效果：同上

实现代码：





    
    圣杯布局--flex
    



    头部
    
        中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        左栏
        右栏
    
    底部

三.固定栏-可扩展栏页面布局

实现效果：

实现代码：





    
    flex
    
    



    
        
            nav1
            nav2
            nav3
        
        
            固定栏：内容内容内容内容内容内容内容内容内容内容
            可扩展栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

四.小结

本文主要提供了三个实例，来实际应用下flex的属性。通过对比其他的实现方式，可以看出使用Flex布局可以优雅地实现相同的CSS布局问题。如有问题，欢迎指正。

此文已由作者授权腾讯云+社区发布

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

GPU云服务器云服务器 flex布局 CSS_Flex css布局 css布局教程

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

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

CSS实例详解：Flex布局

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

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

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

Magicer 2019-08-30 15:54 评论0 收藏0
CSS display 属性详解

摘要：如果项目只有一根轴线，该属性不起作用。后两个属性可选。弹性比为的子代占据父代框的空间是弹性比为的同级属性的两倍。其默认值为，也就是不具有弹性。此元素会根据上下文作为块级元素或内联元素显示栅格模型，类似栅格模型，类似转自属性详解作者 display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

xingqiba 2019-08-29 12:41 评论0 收藏0
CSS display 属性详解

摘要：如果项目只有一根轴线，该属性不起作用。后两个属性可选。弹性比为的子代占据父代框的空间是弹性比为的同级属性的两倍。其默认值为，也就是不具有弹性。此元素会根据上下文作为块级元素或内联元素显示栅格模型，类似栅格模型，类似转自属性详解作者 display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

马永翠 2019-08-01 16:56 评论0 收藏0