CSS3 Flexbox布局一次搞懂_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
CSS3 Flexbox布局一次搞懂
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩25页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢关于布局 -- Position、Float、Flexbox、负边距
回复讨论(解决方案)
LZ，先请问一下：有float:center；这个属性吗？
background-position:center；&&这个只是背景图片定位使用，还可以使用数字。
float:center；这个属性没见过。不清楚。
16:10&&&[]
Web布局非常困难。它如此困难的原因是自从使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局，但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是，我们有了Flexbox模块，或许还有很多读者已经开始使用CSS Grid和
21:23&&&[]
一 摘要 今天来介绍一下React Native中的布局,在React Native混合开发中采用的布局主要是Flexbox,没有接触过HTML5,对这些布局可能非常陌生. 今天给大家总结一下,首先我们还是来看看它的弹性布局概述. 二 基本原理
CSS Flexible Box模块中定义的弹性盒
18:07&&&[]
前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的，这一篇文章，重点介绍下flexbox布局。 什么是flexbox布局 React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案
01:59&&&[]
1.FlexBox布局干什么的? FlexBox就是处理子View和父View之间的关系的.什么关系? 位置关系 尺寸关系.说子View在父View的什么位置啊?子View有多宽多高呢.... 2.FlexBox布局哪来的? 是针对web和移动开发布局而
12:36&&&[]
回复『 1024 』你懂的!
阅读本文大约需要5分钟
本文讲解React Native中的布局,该布局用CSS的flex布局,掌握了这个布局对后面RN应用的开发用途非常之大。本文由 showCar 投稿(点击 阅读原文 )。文章地址: http
11:13&&&[]
React Native使用CSS3中的 flexbox 做布局，比如我们实现这样一个简单布局界面。
如下图（纵向）：
布局逻辑是这样的：
3行，第一行高度固定50pt，第二行占剩余空间的四分之三，第三行占剩余空间的四分之一。 在第二行中，又包含3列元素，每一列元素各占
05:40&&&[]
;padding:2px&1px&2px&1//内边距 &&&&border:&10px&solid&#e7e7e7;//边框 }
2.圣杯布局 &body&class=&quot
10:57&&&[]
网格创建一个背景，那样我们就能很容易的看到自己是否做对了。对于这里的这个示例，我们会使用12列网格，每一列的宽度将会是每一个间隔宽度的4倍。 $susy: ( columns: 12, gutters: 0.25, debug: (image: show-columns) ); 然后我们会使用Susy提供的show-grid()在 .flexbox&和&.susy 上都将网格展示出来。这个 show-grid() 混入只会在选择器上创建一个背景图片，并不会对代码产生任何影响。 .flexbox, .susy { @include show-grid(8);} 好了，让我们继续。对于此布局，我们尝试让.content占据网格中的9列，而.sidebar则占据剩下的3列。 因为我们是现在用的是成比例的网格，所以列和间隔都需要使用百分比宽度。首先我们用flexbox来创建此布局。
Flexbox 链接
因为我们使用的是百分比，所以需要做一些数学计算。 对于此布局，假设每个间隔是20像素宽。列是间隔宽度的4倍 — 因而就是 80 个像素宽。 那么12列布局的总宽度就会是 (12 * 80px) + (11 * 20px) = 1180px.
12列的宽度。 ( 查看大图 )
因为 .content 占了9行，它的宽度就会是 (9 * 80px) + (8 * 20px) = 880px.
9列的宽度。 ( 查看大图 )
最后，我们可以通过用内容的宽度除以网格的总宽度来计算出百分比宽度。 也就是&880px & 1180px * 100% = 74.58%.
9列的百分比宽度。( 查看大图 )
然后，我们可以同样的做一些令人感到不爽的数学计算来得到&.sidebar 的宽度: .flexbox { display: .content { flex-basis: 74.5762712%; } .sidebar { flex-basis: 23.7288136%; }} 谢天谢地，因为我们可以在flex容器中将justify-content设置成space-between，所以不必再为间隔做数学计算了。这是因为剩余的空间，其宽度就是一个间隔，它将会给&.content&和&.sidebar 之间来分。 .flexbox { display: justify-content: space- .content { flex-basis: 74.5762712%; } .sidebar { flex-basis: 23.7288136%; }} 现在让我们来看看如何用Susy来创建相同的布局。
用 Susy 的话, 我们会直接将列的数量插入到&span() 混入中，而它会为我们来计算出百分比宽度。这里，.content 是 span(9) ，因为内容占了9列嘛。 Susy 也会自动计算出一个间隔的宽度，并将其作为margin-right添加到span()混入中。因而，在向侧边栏添加span()的时候，我们的额外加上加上一个last关键词，来告诉Susy恰当的去掉最后一个margin-right属性。 简单点看，创建相同布局的Susy代码如下： .susy { @ .content { @include span(9); } .sidebar { @include span(3 last); }} 就是在这里，你可能会想到这样的代码优雅了许多，没有令人感到不爽的数学计算。那这是否就意味着Susy比flexbox更好呢? 好吧，并不。我们之前提到过，因为他们是不同的工具，所以不能直接拿来做比较。用基于浮动的布局来同flexbox进行比较应该更恰当，这在过去我们也得进行烦人的数学计算。 这也是人们对Susy最感到困惑的地方。它不是一个框架。它是一个强大的网格计算器，构建出来是用来处理grid的数学计算的。 因为它只是一个计算器，所以我们也可以在使用flexbox时用上Susy来去掉烦人的数学计算。这块是Susy中一个少有人知晓的特性。
这一特性就是 span() 函数。. 它是span()混入在flexbox中的用法，用来创建宽度属性。
因此，我们也可以说 .content 的flex-basis是&span(9)，而 .sidebar 的flex-basis是 span(3) ，得到的效果是一样的。 .flexbox { display: justify-content: space- // Susy span function with flexbox .content { flex-basis: span(9); } .sidebar { flex-basis: span(3); }}
如你现在可以看到的，&flexbox 和 Susy 并不能直接拿来作比较，因为他们是不同的工具。不过Susy可被用来在一些领域 对flexbox进行补充：网格的数学计算。
话虽如此，我们还是继续就flexbox和Susy如何构建布局进行“比较”，这样我们就可以看到许多人错过了的一些具体细节。 让我们来看看第三种布局，面对的是一个固定间隔的网格。
布局3：内容和侧边栏位于一个间隔固定网格 在继续之前，我们先创建一个网格遮罩，那样我们就能知道自己是否把网格放对了地方。这里我们只能通过滚动我们自己的网格来进行对比，因为Susy提供的网格并不能固定间隔。 这种网格的标记语言代码如下： &div class=&fixed-gutter-grid&& &!-- 12 columns in total --& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &div class=&column&&&/div& &/div& 接下来，让我们想办法为这个网格的遮罩创建CSS。 首先，间隔必须用固定的单位，因为只有列会扩展其尺寸。根据之前的示例，我们使用20像素作为此网格间隔的宽度。 总共有11个间隔，意味着剩余的列必须占总宽度的 100% - (11 * 20px)。每列的宽度因而就是 (100% - (11 * 20px)) & 12。 正常情况下我们不能混合使用百分比和像素，因此需要使用 calc() 函数来帮助我们做这个。 下面是这个网格的完整的CSS： .fixed-gutter-grid { @ .column { width: calc((100% - (11 * 20px)) / 12); margin-right: 20 float: height: 80 background: rgba(blue, 0.25); &:last-child { margin-right: 0; } }} 因为我们把网格设置好了，所以就需继续尝试 .content&和 .sidebar 的样式。我们要得到下面这样的效果：
间隔固定网格中的内容&侧边栏布局。 ( 查看大图 )
Flexbox 链接
咋一看，用flexbox创建这样的网格应该简单。你可能会想我们可以在.content和.sidebar之间加上20像素的外边距，而flexbox会魔法般的平分&.content&和&.sidebar 之间的空间。 .flexbox { display: justify-content: space- .content { flex-basis: 75%; margin-right: 20 } .sidebar { flex-basis: 25%; }} 不幸的是，并不会那么容易。像上面那样做你得到的效果会是下面这个样子：
&br/使用固定间隔网格的Flexbox。 ( 查看大图 )
你把外边距加到.content或者.sidebar，或者在两者之间平分外边距，都没关系。结果都是一样的。 这是因为当我们考虑到间隔时， .content&和&.sidebar 就不在是精确的3:1比例关系了。要计算它们之间精确的比率关系是不可能的，因为一直在变。 不过还是有一个方法可以规避这个 flex-basis 问题。三个步骤：
给flexbox容器加上等于间隔宽度一半的负数外边距(左和右)。
给所有flex单项都加上等于间隔宽度一半的内边距(左和右)。
给所有的flex单项都设置 border-box 属性。
.flexbox { /* Other properties */ margin-left: -10 margin-right: -10 & div { box-sizing: border- padding: 0 10 } .content { flex-basis: 75%; } .sidebar { flex-basis: 25%; } 因为我们使用了是内边距，而 box-sizing 属性被设置成了 border-box, 现在的CSS还不能让我们看到任何视觉上的变化。 我们需要给每个flex单项的内部内容另外的一个背景颜色，来看清它是如何对齐到网格的： h4 { background:} 这儿有一个问题。如果我们想要给flex单项添加背景颜色会怎么样呢? 解决这个问题的一个办法就是添加额外的标记，但那不是处理这个问题的最佳方法。 一个替代办法就是给每个flex单项用上外边距，而不是内边距。当我们使用外边距时，必须用calc()增加对flex-basis的计算，如此它就是原来的flex-basis减去整个间隔宽度的结果了。 因此，内容的flex-basis应该是 calc(75% - 20px)。其余的属性如下： .flexbox { /* Other flexbox properties */ margin-left: -10 margin-right: -10 & div { /* Switching to margins */ margin: 0 10 } /* flex-basis = percentage - gutters on each side */ .content { flex-basis: calc(75% - 20px); } .sidebar { flex-basis: calc(25% - 20px); }} 这里有一个额外的建议：如果你不喜欢想75%或者25%这样的数学计算，可以在Sass中使用percentage函数。 .content { flex-basis: calc(#{percentage(3/4)} - 20px); }.sidebar { flex-basis: calc(#{percentage(1/4)} - 20px); } 还有一件事儿。当你试着将上面的Codepen滚动到右边，你会看到10像素的间隔。这个间隔是我们在向.flexbox加上&margin-right: -10px 时创建的。 这是在响应式网站上面使用flexbox的一个细微差别。如果你在flex容器上不使用负数外边距，就要确保移除这个通过在父元素上添加 overflow-x:hidden 而创建出来的额外空间。 在这里，我们的父元素是body。 body { overflow-x:} 让我们来看看Susy是如何处理这样的情况的。
Susy 对于这样的网格并没有个答案，因为它是用来计算百分比宽度的。我们能做的就是将其同基于浮动的布局进行比较，在其中我们会使用calc()进行计算。 目前，我们能了解到下面这两件事儿：
间隔的宽度是20像素。
列的宽度是 calc(100% -(11 * 20px) & 12).
从上述的计算 (布局2中), 我们了解到9列的总宽度等于 (9 x 列宽) 加上 (8 x 间隔宽), 它等于 calc((100% - (11 * 20px)) * 9 & 12 + 8 * 20px)
9列。( 查看大图 )
我们可以遵循同样的计算方法得到 .sidebar 的宽度: .self-made-grid { @ .content { float: width: calc((100% - (11 * 20px)) * 9 / 12 + 8 * 20px); margin-right: 20 } .sidebar { float: width: calc((100% - (11 * 20px)) * 3 / 12 + 2 * 20px); }} 如你所见，如果我们的一遍一遍做这样的计算，事情就会很快变得复杂。我们可以做的一件事儿就是简化这个流程，创建出一个网格计算器混入： $columns: 12;$gutter: 20@mixin custom-span($span) { float: width: calc((100% - (#{($columns - 1)} * 20px)) * #{$span} / 12 + #{($span - 1)} * 20px); margin-right: $}.self-made-grid { @ .content { @include custom-span(9); } .sidebar { @include custom-span(3); margin-right: 0; }} 要得到我们的数学计算器并不太难，是不？ 好吧，让我们言归正传、 如你所见，我们需要用flexbox耍一些怪异的小手段，以让固定间隔的网格能正常工作。一旦你拿下了这些基础，要创建任何这种类型网格的布局都应该是简单的。 注意，这个方法非常重要 (你会在布局4和5中知道为什么）。
布局 4: 成比例网格上的画廊布局 除了一般了内容和侧边栏布局，我们通常发现自己会创建的其它布局就是画廊了。 我们来尝试做一个三乘三的画廊。
三乘三画廊。 ( 查看大图 )
因为我们要创建的是一个画廊，所以标记要做一下轻微的修改。 &div class=&flexbox&& &!-- 9 gallery__items --& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div& &div class=&gallery__item&&item&/div&&/div& 类似的，我们也得考虑到两种类型的网格。首先让我们研究下怎么在一个成比例的网格上创建一个画廊。
Flexbox 链接
你首先要注意的一件事儿就是现在有了超过一行的项。如果是这种情况发生的话，我们就需要给&.flexbox 的一个 flex-wrap 属性设置 wrap，来让flex单项会流动到下一行。 .flexbox { display: flex-wrap: justify-content: space-} 接下来，我们需要计算出 flex-basis 的值，那样每个画廊单项就会占据四列。我们知道从上面数学计算可以得出其值应该是&((4 * 80px) + (3 * 20px)) & 1180px * 100% = 32.20339%. .gallery__item { flex-basis: 32.20339%;} 我们也从上面了解到可以将这里的数学计算结果切换成一个Susy的span()函数： .gallery__item { flex-basis: span(4);} 现在的效果就如下所示：
不完整的flexbox画廊布局。( 查看大图 )
当我们创建一个画廊时，我们常常会添加一些垂直方向的外边距，如此画廊单项在垂直和水平方向上的外边距就是相等的。
你心里首先会出现的想法 可能是我们可以给每个画廊单项添加一个基于百分比的margin-top属性。这个margin-top属性应该等于一个间隔的宽度 。
这个宽度应该是 20 & 1180 * 100% = 1.%。我们也可以使用Susy的gutter()函数：
.gallery__item { flex-basis: span(4); margin-top: gutter(); } 如果你去掉背景网格，就得有一个间距相等的画廊： … 也就是说，直到你使用Firefox查看这个布局时才会发现的问题：
Firefox中百分比形式的外边距会失效。 ( 查看大图 )
margin-top 的办法失效是由于flex单项的外边距和内边距的百分比是明确预计好了flex容器的尺寸的，依据就是 flexbox 的规范文档 。
这就意味着margin-top的百分比的值只会在我们制定了flex容器的高度值时才会被计算出来。因为我们没有这样做，margin-top 就会等于0。 这个方法会在Firefox中失效，是因为只有Firefox实现了我们刚刚提到的规范。WebKit 和 Internet Explorer 都还没有实现它。
这就给我们带来了一个不幸的冲突：如果是使用flexbox来创建一个基于百分比的画廊，那 我们想要确保垂直和水平方向上的间隔相等就是不可能的。 不过，我们还是可以做到，如果我们并不是要追求间距的完全相等，那么仍然可以对垂直间隔使用绝对单位(像px和em)。
接下来让我们看看如何使用Susy来实现画廊布局。
Susy 为我们提供了一个 gallery() 混入，可以被用来创建画廊。我们需要做的就是在gallery()混入中加上每个画廊单项会占据的列的数量。 .susy { @ .gallery__item { @include gallery(4); }} 因为Susy使用的是基于浮动的布局，我们仍然可以使用基于百分比的外边距来创建一个间距相等的画廊，没有任何问题： .susy { @ .gallery__item { @include gallery(4); margin-top: gutter(); }} 如你所见，做出一个基于百分比宽度的画廊的唯一方法就是通过一个基于浮动的布局。 不过，如果坚持使用基于浮动的布局，就不能处理高度不相等的画廊单项：
基于浮动布局不能处理高度不相等的画廊。 ( 查看大图 )
我们需要切换到固定宽度网格来创建这样一个画廊，因为我们需要使用 flexbox提供的align-stretch 属性。 因此，让我们来看看布局5，我们会找到如何使用flexbox来创建这样的画廊的方法。
布局 5: 固定间隔网格上的画廊布局 对于最后的这个布局，让我们先掐住话头，直接跳到使用flexbox来创建画廊。
Flexbox 链接
我们可以使用跟布局3中一样的原则 (固定间隔上的内容和侧边栏) 来创建画廊。 我们需要再一次做下面这些事情：
想flexbox容器添加一个负的外边距（左边和右边），其值等于间隔的一半。
想所有的flex单项中添加外边距属性，其值等于间隔的一半。
在所有的flex-basis单项上使用calc()。
在flexbox的父容器上将overflow-x设置成hidden。
body { overflow-x:}.flexbox { display: flex-wrap: justify-content: space- margin-left: -10 margin-right: -10 & div { margin: 0 10 } .gallery__item { flex-basis: calc(#{percentage(1/3)} - 20px); margin: 10 }} 这个画廊的好处就是它能处理高度不一的单项，免除你的烦恼： 我们并不会讨论用Susy实现固定间隔的布局，因为我们知道自己只是要去再次实现自己的解决方案。 对于接下来的部分，因为现在的主题是画廊，所以让我们来聊聊如何处理画廊中总是会发生的两种场景：
画廊单项是宽度不一的。
画廊中剩下的单项。
让我们同时用flexbox和Susy来处理这些问题。尽管有所不同的是，我们会用使用了Susy的布局4同使用了flexbox的布局5进行比较，以展示如何来处理这些情况。
处理Flexbox中宽度不一的单项 假设我们想要让画廊中第一项是其它单项尺寸的两倍。
Flexbox 链接
我们只要给flexbox做一些简单的调整，增加flex-basis百分比，那样它就是其它单项宽度的两倍： .gallery__item:first-child { flex-basis: calc( #{percentage(2/3)} - 20px);}
用Susy的话就不容易了，因为它使用的是独立的技术来创建画廊。如果你尝试了使用flexbox时使用的方法，会得到重叠的效果(例如，增加第一项的宽度)。
网格上面的重叠项。 ( 查看大图 )
我们要做的就是通过理解nth-child和独立的技术是如何运作的，来创建出我们自己的画廊。如果你感兴趣的话，可以看看我的 关于CSS技术的博客 来理解独立的技术是如何运作的。
.susy { @ .gallery__item { float: width: span(4); margin-right: -100%; margin-top: gutter(); } .gallery__item:first-child { width: span(8); } .gallery__item:nth-child(3n-1) { margin-left: span( 8 wide); } .gallery__item:nth-child(3n) { clear: } .gallery__item:nth-child(3n+4) { margin-left: span(4 wide); }} 如你所见，使用Susy来改变画廊单项的默认尺寸并不容易。不过，如果你理解了Susy是如何运作的, 你可以将其处理间隔的方式切换到 inside&或者&split, 并且你可以通过使用span()混入来达到同样的简单性： $susy: ( // Other properties gutter-position: split, );.susy { @ .gallery__item { @include span(4); margin-top: gutter() * 2; } .gallery__item:first-child { width: span(8); }} 最后，这些方法运行的效果最后都是一样的。 接下来我们来聊聊如何处理重叠的单项。
处理重叠的单项 我们看过flexbox和Susy是如何通过让重叠的单项悬空来处理其重叠的问题。如果重叠的单项不止一个会如何呢?
Flexbox 链接
用flexbox实现的效果相当不好，因为我们使用了space-between属性。
让flexbox上的单项悬空。 ( 查看大图 )
不过，我们可以通过将每个单项的flex-grow属性设置成1来解决这个问题： .gallery__item { // Other properties flex-grow: 1;} 但是这样会让第一个单项宽度变成整个容器的宽度，因此你可能会想要注意到会让多少个单项悬空。
重叠的单项占据了整个宽度。 ( 查看大图 )
Susy 默认会让所有的元素悬空到左边，这样多数基于浮动的布局会做的。
使用基于浮动的布局，重叠的单项会被悬空到网格的左边。 ( 查看大图 )
如果你不想要一堆乱糟糟的代码，那我还是建议你不用这种方法。 不过就你的信息而言，可能创建一个使用Susy画廊的布局跟设置 flex-grow: 1 效果是一样的。 我不准备解释这是如何运作的，因为它相当深入了。不过如果你感兴趣想自己弄清楚的话，我们给你留下一个Codepen：
Flexbox Link 的一个重要提醒
我们只讨论在flexbox上基于这篇文章管理flex-basis属性。Flexbox提供了附加的属性，诸如：flex-grow 和 flex-shrink，它可以让我们做更有意思的布局，这与之前的网格是不一样的。 这些类型的布局超出了本文的范围，所以我强烈建议你先看看在下一节中提到的flexbox课程。
结语 以上我们已经探讨了很多关于使用 flexbox 和 Susy 这两个工具来进行网站布局的事情。 通过这些探讨，你将会明白，为什么我们不能直接对比flexbox 和 Susy，因为他们本来就是两种不同的工具。 另外，你还会懂得如何使用 Susy 和 flexbox 来构建不同的网站布局，并能解决人们使用这两种工具时面临的各种挑战。 当然，这并不是flexbox 和 Susy 的全部，那还有很多的东西。 这儿我推荐一下相关的资料：
Flexbox 是什么?! , Wes Bos
揭开 Flexbox 的面纱 , Landon Schropp
学习 Susy , Zell Liew
前七章免费.
以上就是文章的全部内容。你读完后有什么想法，欢迎在下面一起讨论，如果你有什么问题，可以 联系我 ，我将很荣幸为您解答！
(rb, ml, al)
09:10&&&[]
　　Flexbox 布局模块目前是 W3C 候选标准，旨在提供一个更有效的方式进行布局，对齐和为容器里的项目分配空间，即使它们的大小是未知的或者动态的。这里分享一个基于&Knockout.js 构建的互动教程，让你5分钟就掌握 Flexbox 布局模式。 &
19:46&&&[]
: 0 2%;margin-left: -3.3%;} .test1&li{width: 30%;margin-left: 3.3%;}&/style& &p&1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计
16:42&&&[]
刚刚看SQL数据类型的介绍，在SQL2005里float用8个字节开存储。
但是C++&里的float只有4个字节，那么我在C++里用什么来存这个float数据呢，我看Double是8个字节不过不敢确定&，来问一下
回复讨论(解决方案)
C++里面使用Double来
-10:29&&&[]我对Flexbox布局模式的理解 - WEB前端 - 伯乐在线
& 我对Flexbox布局模式的理解
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。
.container{
width: 600
height: 400
border: 1px solid #000;
width: 200
height: 100
border: 1px solid #000;
left: 50%;
margin-left: -100
margin-top:-50
&div class="container"&
&div class="box"&&/div&
123456789101112131415161718192021
&style&&&&&.container{&&&&&&&&width: 600px;&&&&&&&&height: 400px;&&&&&&&&border: 1px solid #000;&&&&&&&&position: relative;&&&&}&&&&.box{&&&&&&&&width: 200px;&&&&&&&&height: 100px;&&&&&&&&border: 1px solid #000;&&&&&&&&position: absolute;&&&&&&&&left: 50%;&&&&&&&&top: 50%;&&&&&&&&margin-left: -100px;&&&&&&&&margin-top:-50px;&&&&}&/style&&div class="container"&&&&&&div class="box"&&/div&&/div&
假如使用了flex后，实现起来就简单了，而且不需要自己去算，也不需要绝对定位，只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，具体如下：
.container{
width: 600
height: 400
border: 1px solid #000;
justify-content:
align-items:
width: 200
//宽度可以为任意
height: 100 //高度可以为任意
border: 1px solid #000;
&div class="container"&
&div class="box"&&/div&
1234567891011121314151617181920
&style& .container{ &&&&width: 600px; &&&&height: 400px; &&&&border: 1px solid #000; &&&&display: flex; &&&&justify-content:center; &&&&align-items:center;
} .box{ &&&&width: 200px;&&//宽度可以为任意 &&&&height: 100px; //高度可以为任意 &&&&border: 1px solid #000;
}&/style&&div class="container"&&&&&&div class="box"&&/div&&/div&
其实Flexbox的优秀特性并不是这一些，首先来一张它的属性图吧~
首先我们来分析下这一张图，从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示：
这张图可以在接下来的属性分析中用到。
display:flex
当我们使用flexbox布局时候，需要先给父容器的display值定位flex（块级）或者inline-flex（行内级）。
当使用了这个值以后，伸缩容器会为内容建立新的伸缩格式化上下文（FFC），它的上下文展示效果和BFC根元素相同（BFC特性：浮动不会闯入伸缩容器，且伸缩容器的边界不会与其内容边界叠加）。
伸缩容器不是块容器，因此有些设计用来控制块布局的属性，在伸缩布局中不适用，特别是多栏（column)，float，clear，vertical-align这些属性。
flex-direction
[flex-direction]属性用来控制上图中伸缩容器中主轴的方向，同时也决定了伸缩项目的方向。
flex-direction:也是默认值，即主轴的方向和正常的方向一样，从左到右排列。
flex-direction:row-和row的方向相反，从右到左排列。
flex-direction:从上到下排列。
flex-direction:column-从下到上排列。 以上只针对ltr书写方式，对于rtl正好相反了。
网页展示效果如下：
[flex-wrap]属性控制伸缩容器是单行还是多行，也决定了侧轴方向（新的一行的堆放方向）。
flex-wrap:伸缩容器单行显示，默认值；
flex-wrap:伸缩容器多行显示；伸缩项目每一行的排列顺序由上到下依次。
flex-wrap:wrap-伸缩容器多行显示，但是伸缩项目每一行的排列顺序由下到上依次排列。
网页效果见图；
[flex-flow]属性为flex-direction（主轴方向）和flex-wrap（侧轴方向）的缩写，两个属性决定了伸缩容器的主轴与侧轴。
flex-flow:[flex-direction][flex-wrap];默认值为row nowrap；
举两个栗子：
flex-flow:也是默认值；主轴是行内方向，单行显示，不换行；
flex-flow:row-主轴和行内方向相反，从右到左，项目每一行由上到下排列（侧轴）。
网页效果如下：
这里大家可以多自己去试试不同的组合。
justify-content
[justify-content]用于定义伸缩项目在主轴上面的的对齐方式，当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content:flex-伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。
justify-content:flex-伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。
justify-content:伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。
justify-content:space-伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。
justify-content:space-伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中间元素两两的间距的一半。完美的平均分配，这个布局在阿里系中很常见。
还是看demo理解起来快一点：
align-items
[align-items]用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。（flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式）。
align-items:flex-伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
align-items:flex-伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
align-items:伸缩项目的外边距在侧轴上居中放置。
align-items:如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。
align-items:伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
下面demo只展示center和stretch的栗子，其他几个可以参考flex-start和flex-end那样。
align-content
[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。
JavaScript
align-content: flex-start || flex-end || center || space-between || space-around ||
align-content: flex-start || flex-end || center || space-between || space-around || stretch;
align-content:默认值,各行将会伸展以占用剩余的空间。
其他可以参考[justify-content]用法。
具体图片来至w3.org官方文档；
太麻烦。写不下去了，摔。
终于写到关于伸缩项目的相关属性了，主要是3个，order，flex（flex-grow，flex-shrink，flex-basis的组合），align-self；用来比较多的是前两个。
有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，主需要将第一个的order:-1；另一个为order:0;这样就好了。
譬如我们想控制一个container中有4个box，想box4为一个显示，box1为最后一个显示。只需要 这样
.container{
&div class="container"&
&div class="box1"&1&/div&
&div class="box2"&2&/div&
&div class="box3"&3&/div&
&div class="box4"&4&/div&
1234567891011121314151617
&style&.container{&&&&&&&&display: flex;&&&&}&&&&.box1{&&&&&&&&order:1;&&&&}&&&&.box4{&&&&&&&&order:-1;&&&&}&/style&&div class="container"&&&&&&div class="box1"&1&/div&&&&&&div class="box2"&2&/div&&&&&&div class="box3"&3&/div&&&&&&div class="box4"&4&/div&&/div&
显示效果就这样了：
[flex]属性可以用来指定可伸缩长度的部件，是flex-grow（扩展比例）,flow-shrink（收缩比例）,flex-basis（伸缩基准值）这个三个属性的缩写写法，建议大家采用缩写的方式而不是单独来使用这3个属性。
JavaScript
flex:none | [ &'flex-grow'& ?&'flew-shrink'& || &'flow-basis'&]
// flex-grow是必须得flex-shrink和flow-basis是可选的
flex:none | [ &'flex-grow'& ?&'flew-shrink'& || &'flow-basis'&]// flex-grow是必须得flex-shrink和flow-basis是可选的
flex-grow:;其中number作为扩展比例，没有单位，初始值是0，主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
flex-grow:;其中number作为收缩比例，没有单位，初始值是1，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例，在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。
flex-basis:|默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前，伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件，则「flex-basis」的指定值是长度零。
flex-basis用图来表示就是这样：
align-self
[align-self]用来在单独的伸缩项目上覆写默认的对齐方式，这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。
JavaScript
align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch
讲了这么多他们的使用，我们来看一看flexbox布局的兼容性。
具体大家可以见这个网站：
在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，但是到了移动端就不是那么好了，特别是国内浏览器，考虑到uc浏览器占了大头，但是uc从图中看到只兼容flex最老的一个版本，也就是2009年的版本，即display:很多现在flex的优秀特性到了它上面都不兼容了，所以建议大家在使用的时候，假如2009版本可以满足开发要求的话，还是去使用2009版本，这样风险更小。
但是假如想兼容多个浏览器，可以采用优雅降级的方式来使用，这里推荐一个scss的,这样就可以使用最新的写法，并且兼容大部分浏览器了。
相信flexbox布局在以后的移动端会用得越来越多的。
关于作者：
可能感兴趣的话题
o 136 回复
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线