圣杯布局（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. TreeMap源码分析1

    二叉树他们都需要满足一个基本性质--即树中的任何节点的值大于它的左子节点,且小于它的右子节点.按照这个基本性质使得树的检索效率大大提高.我们知道在生成二叉树的过程是非常容易失衡的,最坏的情况就是一边倒 ...

  2. Django 路由正则URL

    Django 路由正则URL URL1 # 路由 url(r'^detail/', views.detail) {#点击跳转到指定用户下显示信息#} <li><a target=&q ...

  3. LR编写grammar中的问题和解决方法

    本文主要说明LR解析过程中关于BNF的典型冲突如何在LR中解决 冲突一般分为两种: shift/reduce错误 redure/redure错误 下面分别解释两种冲突 1. shift/reduce错 ...

  4. tkinter添加背景音乐

    一.问题利用tkinter来写一个游戏,添加一个背景音乐提高可玩性. 二.解决1.安装pygame首先是利用pygame的一个播放流:[pip install pygame]来完成pygame的安装. ...

  5. 认清楚服务器的真正身份--深入ARP工作原理

    我们知道IP地址是ISP分配给我们的,IP不能作为服务器的唯一的身份,那么服务器真正的身份是什么呢?MAC IP地址直接的通信在底层要转换到MAC直接的通信,那他们如何通信的呢? 1.简介 出场人物: ...

  6. opencv常用数据结构

    2019/10/29 1.Mat 成员函数:cols.rows.channels.ptr获取任意行的首地址.at处理像素 2.InputArray/OutArray相当于Mat 2019/11/4 1 ...

  7. 上传文件时用form.submit提交的时候在低版本的IE中报拒绝访问的错误

    上传文件的时候,在IE7下总是传不了,但FireFox,IE11和Chrome下则可以上传.发现是form.submit();时出错了(“拒绝访问”). html代码为: <label oncl ...

  8. Identity和IdentityServer的区别及联系

    关于Identity和IdentityServer初学的时候可能会有一些疑惑(虽然我也不是很精深吧),但是,这里说一下自己关于这两者的一些理解,如有错误,欢迎指正 总体上, ASP.NET Core ...

  9. 2019 满帮java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.满帮等公司offer,岗位是Java后端开发,因为发展原因最终选择去了满帮,入职一年时间了,也成为了面试官,之 ...

  10. Linux环境下：vmware安装Windows报错误-缺少所需的CD/DVD驱动器设备驱动程序

    解决方法:将硬盘格式从SCSI改为IDE. 方法如下: 右键点击你新建的虚拟机名,点击最下面的setting,看到左侧第二行是hard disk 了么,你那里肯定是SCSI的,选中它,点最下面的rem ...