flex 圣杯布局

senntyou 发布于2019-04-23 11:48 / 3009人阅读

摘要：基本思路圣杯布局分为段上中下。中段被分为左中右块。采用布局时，先把弹性容器主轴设置为垂直方向上中下块弹性项目设置均匀拉伸或固定上下两端大小，让中间自动拉伸。中间块设置为自动拉伸，左右两块可设置固定宽度。

基本思路

圣杯布局分为3段：上、中、下。中段被分为：左、中、右3块。

1：采用flex布局时，先把弹性容器主轴设置为垂直方向（flex-direction:column）

2：上、中、下3块弹性项目设置均匀拉伸（flex:1）或固定上、下两端大小，让中间自动拉伸。注意：flex:拉伸是方向为主轴方向

3：中段部分在设置为弹性容器，主轴方向为水平方向（flex-direction:row），此时左、中、右3块为弹性项目。中间块设置为自动拉伸，左、右两块可设置固定宽度。

代码

    <div class="container">
        <div class="header">div>
        <div class="content">
            <div class="left">div>
            <div class="center">div>
            <div class="right">div>
        div>
        <div class="footer">div>
    div>

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header,
.footer{
    height: 75px;
    background: greenyellow;
}
.content{
    display: flex;
    flex-direction: row;
    flex: 1;
}
.left,.right{
    width:200px;
    background: darkorange;
}
.center{
    flex: 1;
}

云服务器 GPU云服务器圣杯布局 flex布局圣杯 flex

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

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

CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0
CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...

zqhxuyuan 2019-08-30 14:11 评论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
圣杯布局和双飞翼布局

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 评论0 收藏0