圣杯布局（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. Makefile文件基本格式

    以下是Makefile的基本模板 #指定编译器CC = g++#指定编译参数CFLAGS = -std=c++11 #指定头文件路径,此处用于指定非标准库的头文件路径INC = -I./ -I /us ...

  2. 上传文件到新浪云Storage的方法

    上传文件到新浪云Storage的方法,兼容本地服务器 if (!empty($_FILES['sharepic']['name'])){ $tmp_file = $_FILES['sharepic'] ...

  3. 收藏：C语言中字符串常量到底存在哪了？

    来源:https://www.cnblogs.com/jaysir/p/5041799.html 常量存储总结局部变量.静态局部变量.全局变量.全局静态变量.字符串常量以及动态申请的内存区 1.局部变 ...

  4. 修改Mac新建文件、文件夹的默认权限

    Mac 新建文件和文件夹默认 当前用户才有读和写的权限,其他用户只有读的权限 修改Mac新建文件.文件夹的默认权限的步骤如下: 1.打开 “终端” 2.在终端中输入以下命令: 创建文件时,从默认值(对 ...

  5. 017 使用域名访问本地项目---涉及switchhost和Nginx

    1.统一环境 我们现在访问页面使用的是:http://localhost:9001 实际开发中,会有不同的环境: 开发环境:自己的电脑 测试环境:提供给测试人员使用的环境 预发布环境:数据是和生成环境 ...

  6. Disable foreign key checks during import

    The command SET FOREIGN_KEY_CHECKS=0; sets the value of a variable in a session scope. So it affects ...

  7. 模板方法(TemplateMethod)模式

    模板方法模式是准备一个抽象类,将部分逻辑以具体方法以及构造子的形式出现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑部分有不同的实现.这也 ...

  8. CSP2019-S游记

    目录 CSP2019-S游记 Day -2(UPDATE:2019-11-14) Day -1(UPDATE:2019-11-15) Day 1(UPDATE:2019-11-16) Day 2(UP ...

  9. LOJ2257 SNOI2017 遗失的答案 容斥、高维前缀和

    传送门 数字最小公倍数为\(L\)的充分条件是所有数都是\(L\)的约数,而\(10^8\)内最多约数的数的约数也只有\(768\)个.所以我们先暴力找到所有满足是\(L\)的约数.\(G\)的倍数的 ...

  10. Java Objective-C AOP

    Java Use an AOP library or byte-code engineering (BCEL, cglib, asm, etc) to create a sub-class on th ...