圣杯布局（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. Java基础之十六 数组

    数组:可以创建并组装它们,通过使用整型索引值访问它们的元素,并且它们的尺寸不能改变. 16.1 数组为什么特殊 数组与其他种类的容器之间的区别有三方面:效率,类型和保存基本类型的能力. 数组是一种效率 ...

  2. CentOS 7搭建本地yum源和局域网yum源

    这两天在部署公司的测试环境,在安装各种中间件的时候,发现各种依赖都没有:后来一检查,发现安装的操作系统是CentOS Mini版,好吧,我认了:为了完成测试环境的搭建,我就搭建了一个局域网的yum源. ...

  3. 解决mybatis中#{}导致的The error may involve defaultParameterMap的问题

    今天想实现给指定表插入数据,出现了 ### Error updating database. Cause: java.sql.SQLSyntaxErrorException: You have an ...

  4. 【07月02日】A股滚动市盈率PE最低排名

    ​仅根据最新的市盈率计算公式进行排名,无法对未来的业绩做出预测. 方大集团(SZ000055) - 滚动市盈率PE:2.68 - 滚动市净率PB:1.2 - 滚动年化股息收益率:3.78% - 建筑产 ...

  5. Python【每日一问】23

    问: [基础题]:判断 101-200 之间有多少个素数,并输出所有素数 PS:素数:一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数 [提高题]:输入某年某月某日,判断这一天是周几?( ...

  6. [记录]UserControl 的一个值得注意的问题 [属性" * "的代码生成失败.错误是:"程序集"*.Version=1.0.0.0,Culture=neutral,..........无标记为序列化"

    开发时在做UserControl,需要注意的List<>集合问题~~~! 其他类型的集合可能也存在这样的问题,但是我没去测试,在写集合的时候一般List<>用的多点,所以经常碰 ...

  7. QT之类型转换

    Qt在进行数据类型转换时,容易忘记如何使用,或者是早已厌倦了百度QString转QByteArray,QByteArray转char,QString转string....... 现在分享一篇QT数据类 ...

  8. CSP2019: Lost and Found

    再不更就成鸽子了= = Day -INF to Day 0 不记得发生了什么 Day 1 今年HN用网上提交的方式收题?再也不怕因为交代码太晚增加省队名额了 开考看了一眼T1好像是模拟题,特地注意了\ ...

  9. SQL分类之DCL:管理用户、授权

    DCL:管理用户.授权 SQL分类: DDL:操作数据库和表 DML:增删改表中的数据 DQL:查询表中的数据 DCL:管理用户.授权 DBA:数据库管理员 DCL:管理用户.授权 1.管理用户 1. ...

  10. CKEditor 4 上传视频

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