圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

本章就用flex布局来设计圣杯布局

先放上代码

html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="2-2.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div class="box">

<header class="header">#header</header>

<div class="main-content">

<div class="child left">#left</div>

<div class="child center">#center</div>

<div class="child right">#right</div>

</div>

<footer class="footer">#footer</footer>

</div>

</body>

</html>

css代码

*{

    text-align:center;

    font-size:30px;

}

.box{

    display:flex;

    flex-wrap:wrap;

   // border:1px solid red;

    flex-direction:column;//我们这里设置的排列方式竖向排列，也就是说主轴是从上到下的。

    height:600px;

    width:900px;

}

.header{

    flex-basis:20%;//这个属性设置的改项目占主轴长度的比例。

    background:rgb(102,102,102);

    color:rgb(255,255,255);

    line-height:4.5em;

}

.main-content{

    flex-basis:60%;

    display:flex;//中间部分又分三个模块，所以将中间部分也设置成flex布局。

    background:yellow;

    color:rgb(0,0,0);

    line-height:13.5em;

}

.footer{

    flex-basis:20%;

    background:rgb(102,102,102);

    color:rgb(255,255,255);

    line-height:4.5em;

}

.child:nth-child(1){

    flex-basis:20%;

    background:rgb(119,187,221);

}

.child:nth-child(2){

    flex-basis:60%;

    background:rgb(214,214,214);

}

.child:nth-child(3){

    flex-basis:20%;

    background:rgb(255,102,51);

}

注意事项：1.flex布局中项目是不分块状元素与内联元素的。也即是原来html中的内敛元素也是可以设置宽度的。

2.我们可以给其中的项目设置长和宽的值，这样是可以的，如果你没有设置宽度的话，你可以通过flex-basis属性设置项目在主轴上的长度比例。

举一个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="1.css" rel="stylesheet" type="text/css"/>

</head>

<div class="box">

<span class="child"></span>

<span class="child"></span>

</div>

</body>

</html>

如果我们没有设置span的长和宽的话，设置它们的flex-basis属性为：50%;justify-content:space-between;且如果我们设置的主轴就是横轴的话，那这两个项目会在一排排列，结果如下

且大家注意到了一个地方，他的高是占据整个容器的高度的。也就是说如果我们没有设置项目在交叉轴上的长度话，项目就一直会延伸变长，除非碰到父容器的边界和其他项目为止。

如果我多添加几个项目

结果变成这样了，也就是说如果我们没有设置项目在交叉轴上的长度的话，那么项目的长度会只适应长度。如果设置了固定长度的话，他就会以固定的长度来显示。

如果主轴上没有设置固定宽度，又没有设置flex-basis属性的话，那么项目在主轴上的宽度就会只适应，也就是宽度为项目内容的宽度。

3.我们还可以通过项目的flex-grow属性来设置项目在主轴上是如何分配剩余空间的。

flex布局--小实例的更多相关文章

  1. Flex 布局教程实例

    Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...

  2. Flex 布局教程:实例

    分类: 开发者手册 Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...

  3. flex布局语法+实例

    一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...

  4. Flex 布局：实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. ​ 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇& ...

  5. 「小程序JAVA实战」小程序的flex布局（22）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  6. flex布局学习

    教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...

  7. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  8. H5新出的flex布局

    百度前端技术学院第一阶段中的任务十,就是关于flexbox布局的 与flexbox布局相关的资料如下: 1.flex布局教程-语法篇-阮一峰的网络日志  http://www.ruanyifeng.c ...

  9. Flex布局（二）

    接上一篇,说一下flex布局的实例,转自阮一峰老师的博客

随机推荐

  1. Tarjan 算法求 LCA / Tarjan 算法求强连通分量

    [时光蒸汽喵带你做专题]最近公共祖先 LCA (Lowest Common Ancestors)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili tarjan LCA - YouTube Tarj ...

  2. [转帖]iostat 命令详解

    iostat 命令详解 https://www.jianshu.com/p/5fed8be1b6e8 概述 iostat 主要用于输出磁盘IO 和 CPU的统计信息. iostat属于sysstat软 ...

  3. 原始(Prototype)模式

    原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型对象创建新的对象. 原型模式其实就是从一个对象创建另外一个可复制的对象,而且不需要知道任何创建的细节.(最常用的就是基于流的深复制) 原始模 ...

  4. 搭建zipkin并以mysql的方式存储数据

    zipkin以mysql的方式存储 (centos+java8+mysql+zipkin2.3.1) 前言: 这篇教程用于搭建已mysql作为存储的zipkin.(还不知道zipkin是什么的小伙伴请 ...

  5. 另一个角度的redis--redis 可以看做是c/s架构的软件

    Redis 通信协议简单研究 redis 可以看做是c/s架构的软件,再打开一个终端输入下面的指令 https://www.cnblogs.com/nele/p/8908298.html redis ...

  6. DispatcherServlet 是 spring 网络模块的核心

    https://cn.bing.com/images/search?q=DispatcherServlet+&FORM=HDRSC2

  7. CSAPP第二章show_bytes函数的探究

    CSAPP第二章中给出了一个帮助我们观察数据的位模式的函数--show_bytes函数,具体实现如下: #include<stdio.h> typedef unsigned char *b ...

  8. CKEditor 4 上传视频

    参考资料:CKEditor添加Video视频插件 HTML5 video 记得配置插件以及上传地址,不知道哪一个是上传视频的地址参数,我也没有试,因为我有上传图片的功能,所以这三个参数我都设置了. / ...

  9. Git 理解修改

    参考链接:https://www.liaoxuefeng.com/wiki/896043488029600/897884457270432 Git之所以比其他版本控制系统设计得优秀,就是因为Git跟踪 ...

  10. prometheus被OOM杀死

    参考https://www-01.ibm.com/support/docview.wss?uid=ibm10882172 提升内存配置 2.5版本后新增--query.max-samples 这个参数 ...