2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

通过笔者大量实践，发现flex布局屡试不爽，尤其在移动端自适应方面。但处于其大量的属性记忆混乱，今天图文并茂梳理如下。

语法及概念部分

实例演示部分

结合笛卡尔坐标系（仅考虑一个item情况，其它情况可以据此的排列组合实现）

css部分

/*骰子的布局*/

.box {

  display: flex;

  width: 50px;

  height: 50px;

  border: 1px solid #ccc;

  border-radius: 2px;

}

.box .item{

	display: inline-block;

	width: 10px;

	height: 10px;

	margin:3px;

	border-radius: 50%;

	background: #000;

}

/*中上(1,0)*/

.c2{

	justify-content: center;

}

/*右上(2,0)*/

.c3{

	justify-content: flex-end;

}

/*左间(0,1)*/

.c4{

	align-items: center;

}

/*左下(0,2)*/

.c5{

  align-items: flex-end;

}

/*中间(1,1)*/

.c6{

  justify-content: center;

  align-items: center;

}

/*右间(2,1)*/

.c7{

	justify-content: flex-end;

  align-items: center;

}

/*中下(1,2)*/

.c8{

  justify-content: center;

  align-items: flex-end;

}

/*右下(2,2)*/

.c9{

  justify-content: flex-end;

    align-items: flex-end;

}

/*两个*/

/*space-between*/

.c21{

	justify-content: space-between;

}

/*两个flex-direction+column*/

.c22{

	justify-content: space-between;

	flex-direction: column;

}

/*2.3两个space-between+flex-direction+ align-items*/

.c23{

	justify-content: space-between;

	flex-direction: column;

	align-items: center;

}

/*2.4两个space-between+flex-direction+ align-items*/

.c24{

	justify-content: space-between;

	flex-direction: column;

	 align-items: flex-end;

}

/*2.5两个space-between+flex-direction+ align-items*/

.c25 .item:nth-child(2) {

	 align-self: center;

}

/*2.6两个space-between+flex-direction+ align-items*/

.c26{

	justify-content: space-between;

}

.c26 .item:nth-child(2) {

	 align-self:  flex-end;

}

/*3.1三个align-self：center+flex-end*/

.c31 .item:nth-child(2) {

	 align-self:  center;

}

.c31 .item:nth-child(3) {

	 align-self:  flex-end;

}

/*4.1四个*/

.c41 {

	flex-wrap: wrap;

  justify-content: flex-end;

  align-content: space-between;

}

/*4.2四个*/

.c42 {

	flex-wrap: wrap;

  align-content: space-between;

}

.column {

  flex-basis: 100%;

  display: flex;

  justify-content: space-between;

}

/*6.1六个*/

.c61{

	flex-wrap: wrap;

}

.row{

  flex-basis: 100%;

  display:flex;

}

.row:nth-child(2){

  justify-content: center;

}

.row:nth-child(3){

  justify-content: space-between;

}

/*九个*/

.c9{

	flex-wrap: wrap;

}

/*网格布局*/

/*基本*/

.Grid {

  display: flex;

}

.Grid-cell {

  flex: 1;

}

/*百分比布局*/

.Grid-cell.u-full {

  flex: 0 0 100%;

}

.Grid-cell.u-1of2 {

  flex: 0 0 50%;

}

.Grid-cell.u-1of3 {

  flex: 0 0 33.3333%;

}

.Grid-cell.u-1of4 {

  flex: 0 0 25%;

}

/*圣杯布局圣杯布局（Holy Grail Layout）*/

.fh {

    display: flex;

    min-height: 98vh;

    flex-direction: column;

    margin: 1rem;

}

.fh-header {

    display: flex;

    flex: 1.2;

    border: 1px solid #ccc;

}

.fh>.fh-middle {

    flex: 1;

    border: 1px solid #ccc;

    margin: 1rem 0;

}

.fh>.fh-footer {

    flex: 2.5;

    border: 1px solid #ccc;

}

.fh-content {

    flex: 1;

    border: 1px solid #ccc;

}

.fh-nav {

    /* 边栏的宽度设为20rem */

    flex: 0 0 20rem;

    border: 1px solid #ccc;

}

.fh-nav {

    /* 导航放到最左边 */

    order: -1;

    margin-right: 1rem;

}

/*输入框布局*/

.InputAddOn {

  display: flex;

}

.InputAddOn-field {

  flex: 1;

}

/*悬挂式布局*/

.Media {

  display: flex;

  align-items: flex-start;

}

.Media-figure {

  margin-right: 1em;

}

/*固定低栏*/

.Site {

  display: flex;

  min-height: 100vh;

  flex-direction: column;

}

.Site-content {

  flex: 1;

}

/*流式布局*/

.parent {

  width: 200px;

  height: 150px;

  background-color: black;

  display: flex;

  flex-flow: row wrap;

}

.child {

  box-sizing: border-box;

  background-color: white;

  flex: 0 0 25%;

  height: 50px;

  border: 1px solid red;

}

html部分

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>fh-main</title>

	<link rel="stylesheet" href="flex.css">

</head>

<body >

<h4>骰子的布局（左0中1右2，上0间1下2）</h4>

<p>1.1一个左上(0,0):justify-content:flex-start(default);</p>

	<div class="box c1">

		<span class="item"></span>

	</div>

<p>1.2一个中上(1,0):justify-content:center;</p>

	<div class="box c2">

		<span class="item"></span>

	</div>

<p>1.3一个右上(2,0):justify-content:flex-end;</p>

	<div class="box c3">

		<span class="item"></span>

	</div>

<p>1.4一个左间(0,1)

  :align-items: center;</p>

	<div class="box c4">

		<span class="item"></span>

	</div>

<p>1.5一个左下(0,2):align-items: flex-end;</p>

	<div class="box c5">

		<span class="item"></span>

	</div>

<p>1.6一个中间(1,1):justify-content: center;align-items:center;</p>

	<div class="box c6">

		<span class="item"></span>

	</div>

<p>1.7一个右间(2,1):justify-content:flex-end;align-items:center;</p>

	<div class="box c7">

		<span class="item"></span>

	</div>

<p>1.8一个中下(1,2) :justify-content:center;align-items:flex-end;</p>

	<div class="box c8">

		<span class="item"></span>

	</div>

<p>1.9一个右下(2,2) justify-content: flex-end;

  align-items: flex-end;</p>

	<div class="box c9">

		<span class="item"></span>

	</div>

<p>2.1两个space-between</p>

	<div class="box c21">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>2.2两个space-between+flex-direction</p>

	<div class="box c22">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>2.3两个space-between+flex-direction+ align-items</p>

	<div class="box c23">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>2.4两个space-between+flex-direction+ align-items：flex-end</p>

	<div class="box c24">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>2.5两个align-self</p>

	<div class="box c25">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>2.6两个align-self</p>

	<div class="box c26">

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>3.1三个align-self：center+flex-end</p>

	<div class="box c31">

		<span class="item"></span>

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>4.1四个</p>

	<div class="box c41">

		<span class="item"></span>

		<span class="item"></span>

		<span class="item"></span>

		<span class="item"></span>

	</div>

<p>4.2四个</p>

	<div class="box c42">

		<span class="column">

			<span class="item"></span>

			<span class="item"></span>

		</span>

		<span class="column">

			<span class="item"></span>

			<span class="item"></span>

		</span>

	</div>

<p>6.1六个</p>

<div class="box c61">

  <div class="row">

    <span class="item"></span>

    <span class="item"></span>

    <span class="item"></span>

  </div>

  <div class="row">

    <span class="item"></span>

  </div>

  <div class="row">

     <span class="item"></span>

     <span class="item"></span>

  </div>

</div>

<p>9九个</p>

	<div class="box c9">

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

     <span class="item"></span>

  </div>

<h2>网格布局</h2>

<p>2.1基本网格布局</p>

<div class="Grid">

  <div class="Grid-cell">Grid-cell</div>

  <div class="Grid-cell">Grid-cell</div>

  <div class="Grid-cell">Grid-cell</div>

</div>

<p>2.2百分比布局</p>

<div class="Grid">

  <div class="Grid-cell u-1of4">u-1of4</div>

  <div class="Grid-cell">...</div>

  <div class="Grid-cell u-1of3">u-1of3</div>

</div>

<h2>圣杯布局</h2>

<div class="fh">

	<header class="fh-header">

		<nav class="fh-nav">nav</nav>

		<main class="fh-content">mian</main>

	</header>

	<div class="fh-middle">middle</div>

	<footer class="fh-footer">footer</footer>

</div>

<h2>输入框的布局</h2>

<div class="InputAddOn">

  <span class="InputAddOn-item">icon</span>

  <input class="InputAddOn-field">

  <button class="InputAddOn-item">btn</button>

</div>

<h2>悬挂式布局</h2>

<div class="Media">

  <img class="Media-figure" src="a/img" alt="aa">

  <p class="Media-body">...</p>

</div>

<h2>固定低栏</h2>

<div class="site">

  <header>header</header>

  <main class="Site-content">main </main>

  <footer>footer</footer>

</div>

<h2>流式布局</h2>

<div class="parent">

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

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

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

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

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

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

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

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

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

</div>

</body>

</html>

flex布局各种情况总结分析及实例演示的更多相关文章

  1. Flex 布局教程:实例

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

  2. Flex 布局教程：语法和实例

    语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...

  3. Flex 布局教程：实例篇【转】

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...

  4. flex布局语法+实例

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

  5. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  6. Flex 布局教程：实例篇（转）

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  7. flex布局实例demo全解

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

  8. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  9. Flex 布局：实例篇

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

随机推荐

  1. Codeforces Round #330 (Div. 2) B. Pasha and Phone

    B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. HDU1828线段树（扫描线）

    Picture Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  3. C语言函数的变参实用与分析

    实现变参传递的关键是: 传入参数在内存中是连续分布的. #define va_list void* #define va_arg(arg, type) *(type*)arg; arg = (char ...

  4. [LeetCode] Binary Tree Level Order Traversal 与 Binary Tree Zigzag Level Order Traversal，两种按层次遍历树的方式，分别两个队列，两个栈实现

    Binary Tree Level Order Traversal Given a binary tree, return the level order traversal of its nodes ...

  5. ES6中函数的扩展

    一.设置默认参数 ES6之前,给函数设置默认参数是这样做的: function fn(a) { if(typeof y === undefined){ a = a || 'hello'; } cons ...

  6. 南阳ACM 题目8：一种排序 Java版

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...

  7. NOJ/HUST 1095 校赛 Just Go 线段树模板题

    Description There is a river, which contains n stones from left to right. These stones are magic, ea ...

  8. 【设计模式】 模式PK：门面模式VS中介者模式

    1.概述 门面模式为复杂的子系统提供一个统一的访问界面,它定义的是一个高层接口,该接口使得子系统更加容易使用,避免外部模块深入到子系统内部而产生与子系统内部细节耦合的问题.中介者模式使用一个中介对象来 ...

  9. OScached缓存整个页面和缓存局部页面

    1.缓存整个页面 在OSCache组件中提供了一个CacheFilter用于实现页面级的缓存.主要用于对web应用中的某些动态页面进行缓存,尤其是那些需要生成PDF格式文件/报表.图片文件等的页面,不 ...

  10. TOJ 1049 Jesse's problem （最短路 floyd）

    描述 All one knows Jesse live in the city , but he must come to Xiasha twice in a week. The road is to ...