圣杯布局（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. [Gamma]阶段发布说明

    小小易校园微信小程序发布说明 第二版小小易校园小程序发布啦~ 打开微信,点击右上角➕,选择扫一扫,扫描以下二维码即可进入小程序: 版本功能: 上一版功能请参见[Beta阶段]发布说明. 当前版本的更新 ...

  2. 配置 Jenkins 连接 Kubernetes 集群

    需求:外部 Jenkins 需要连接 Rancher 中的 Kubernetes 集群. 1.集群 config 文件 Rancher 首页,"集群" --> 右上角&quo ...

  3. | C语言I作业02

    C语言I博客作业02 标签: 18软件2班 李煦亮 问题 答案 这个作业属于那个课程 C语言程序设计I 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/C ...

  4. 如何申请腾讯地图用户Key

    打开网页https://lbs.qq.com/,进入腾讯位置服务. 单击[登录],登录腾讯账号(本文以QQ登录为例),如果首次登陆腾讯位置服务,则提示注册开发者账号. 选择箭头处[注册新账号].填写手 ...

  5. 通过Queue控制线程并发，并监控队列执行进度

    # -*- coding:utf-8 -*- import Queue import time import threading # 需要执行的业务主体 def domain(id): time.sl ...

  6. Replication：Distribution Reader

    在transactional replication中,在publication中执行了一个更新,例如:update table set col=? Where ?,如果table中含有大量的数据行, ...

  7. .net代码混淆

    本人主要记录一下学习心得,.net关于代码混淆的知识 1.代码混淆的原理,转载链接 2.代码混淆工具,ConfuserEx的使用,转载地址

  8. WindowsXP序列号产生原理(椭圆曲线法)

    WindowsXP序列号产生原理(椭圆曲线法) 来源  https://blog.csdn.net/zhiyuan411/article/details/5156330 参考 https://www. ...

  9. 微信小程序中使用全局变量解决页面的传值问题

    由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的 ...

  10. jQuery常用方法(五)

    一.jQuery中常用方法相关方法参数说明:a.无参,获取值b.参数param,设置值c.参数function(index,oldVal){}回调函数[返回我们所要使用的新值]    回调函数的两个参 ...