【CSS3】 之 弹性盒子（Flex Box）

编程爱好者联盟 2016-12-04

  1. Flex布局是什么
  2. 如何指定一个容器为Flex布局
  3. Flex的基本语法
  4. display
  5. flex-direction
  6. justify-content
  7. align-items
  8. flew-wrap
  9. align-self
  10. flex-flow
  11. flex
  12. order
示例
  1. 骰子的布局
  2. 圣杯的布局
参考文章

一， Flex布局是什么

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局是W3C组织于2009年提出的一种布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

【CSS3】 之 弹性盒子（Flex Box）

Flex布局将成为未来布局的首选方案。

二，如何指定一个容器为Flex布局

只需要在容器中添加值为flex的display属性。

.box{
  display: flex;
}

三，Flex的基本语法

display

[blockquote]

语法： display:flex;

[/blockquote]

指定Flex。

 flex-direction

[blockquote]

语法： flex-direction: row | row-reverse | column | column-reverse

[/blockquote]

指定弹性子元素在父容器中的排列顺序。这个也可以通过设置 direction:rtl; 或是 direction:ltr; 来等效实现，其中的rtl、ltr是right to left、left to right的简写。

justify content

[blockquote]

　语法： justify-content: flex-start | flex-end | center | space-between | space-around

[/blockquote]

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

概念理解图：

【CSS3】 之 弹性盒子（Flex Box）

其中space-around，笔者总结了一个简单的公式：

x=(W2-N*W1)/(2N)

x:最两边留下的宽度。

W2:就是模块的width。

W1:一个子模块的宽度（每个均匀）。

N:

align-items

[blockquote]

语法： align-items: flex-start | flex-end | center | baseline | stretch

[/blockquote]

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

下面这张图片可以帮助读者理解baseline：

【CSS3】 之 弹性盒子（Flex Box）

flex-wrap

[blockquote]

语法： flex-flow: nowrap | warp | warp-reverse

[/blockquote]

align-content

[blockquote]

语法： align-content: flex-start | flex-end | center | space-between | space-around | stretch

[/blockquote]

 设置各个行的对齐方式。

align-self

[blockquote]

语法： align-self: auto | flex-start | flex-end | center | baseline | stretch

[/blockquote]

设置弹性元素自身在侧轴方向的对齐。这个属性要区别与align-content,align-content的范围是每一行，然而align-self只是某一行里面的某个弹性元素。

flex-flow

[blockquote]

语法：flex-direction和flex-wrap的简写。

[/blockquote]

flex

[blockquote]

语法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

[/blockquote]

指定元素分配空间。需要注意，如果flex-basis为100%，那么该弹性模块就会单独占一行。

oder

[blockquote]

语法： order: number|initial|inherit;

[/blockquote]

指定弹性模块的排列顺序，其中值越小，越优先，可以为负值。

四，示例

1，骰子的布局

骰子的一面，最多可以放置9个点。

【CSS3】 之 弹性盒子（Flex Box）

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

【CSS3】 之 弹性盒子（Flex Box）

如果不加说明，本节的HTML模板一律如下。

[blockquote]

<div class="box">
  
</div>

[/blockquote]

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
}

[/blockquote]

设置项目的对齐方式，就能实现居中对齐和右对齐。

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: center;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: flex-end;
}

[/blockquote]

设置交叉轴对齐方式，可以垂直移动主轴。

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  align-items: center;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

[/blockquote]

1.2 双项目

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: space-between;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

[/blockquote]

1.3 三项目

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

[/blockquote]

1.4 四项目

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

HTML代码如下。

[blockquote]

<div class="box">
  <div class="column">
    
    
  </div>
  <div class="column">
    
    
  </div>
</div>

[/blockquote]

CSS代码如下。

[blockquote]

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

[/blockquote]

1.5 六项目

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

[/blockquote]

【CSS3】 之 弹性盒子（Flex Box）

HTML代码如下。

[blockquote]

<div class="box">
  <div class="row">
    
    
    
  </div>
  <div class="row">
    
  </div>
  <div class="row">
     
     
  </div>
</div>

[/blockquote]

CSS代码如下。

[blockquote]

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

[/blockquote]

1.6 九项目

【CSS3】 之 弹性盒子（Flex Box）

[blockquote]

.box {
  display: flex;
  flex-wrap: wrap;
}

[/blockquote]

    2,圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

【CSS3】 之 弹性盒子（Flex Box）

HTML代码如下：

<div class="flex-container">
  <header class="header">头部</header>
  <article class="main">
    <p>主体</p>
  </article>
  <aside class="aside aside1">边栏 1</aside>
  <aside class="aside aside2">边栏 2</aside>
  <footer class="footer">底部</footer>
</div>

CSS代码入下：

.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside1 { order:; } 
    .main    { order:; }
    .aside2 { order:; }
    .footer  { order:; }
}

 五，参考文章

https://davidwalsh.name/flexbox-dice

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.runoob.com/css3/css3-flexbox.html

本文章为博主原创作品，若需转载请注明出处。

编程爱好者联盟

编程爱好者联盟

相关推荐

web前端入门到实战：CSS3中的弹性盒子模型

在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分

zengni / 0评论 2020-01-17

弹性盒子

　　　　row：横向从左到右排列（左对齐），默认的排列方式。　　　　column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行　　　　wrap-reverse -反转 wrap

htofly / 0评论 2019-11-03

Flexible 弹性盒子模型之CSS order 属性

div#myRedDIV {order:2;}div#myBlueDIV {order:4;}div#myGreenDIV {order:3;}div#myPinkDIV {order:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的

cssuperman / 0评论 2017-01-17

Flexible 弹性盒子模型之CSS justify-content 属性

div{display: flex;justify-content: space-around;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。justify-content29.021.0-webkit-11.028.018.0

xingyunchen / 0评论 2017-01-16

Flexible 弹性盒子模型之CSS align-self 属性

#myBlueDiv{align-self:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignSelf="center&q

猫沙盆 / 0评论 2017-01-13

Flexible 弹性盒子模型之CSS align-items 属性

div{display: flex;align-items:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignItems="

wcssdu / 0评论 2017-01-12

Flexible 弹性盒子模型之CSS flex-wrap 属性

display:flex;flex-wrap: wrap;复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit

tianzyc / 0评论 2017-01-10

Flexible 弹性盒子模型之CSS flex-direction

div{display:flex;flex-direction:row-reverse;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-direction29.021.0-webkit-11.010.0-ms-28.01

zhanghao / 0评论 2017-01-09

Flexible 弹性盒子模型之CSS flex-flow

display:flex;flex-flow:row-reverse wrap;效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-flow29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06

JenniferMuMu / 0评论 2017-01-06

Flexible 弹性盒子模型之CSS flex-basis 属性

div:nth-of-type{flex-basis:80px;}效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-basis29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-web

wangnantjobj / 0评论 2017-01-05

Flexible 弹性盒子模型之CSS flex-shrink 属性

效果预览div:nth-of-type{flex-shrink:3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-shrink29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webk

startXUEBA / 0评论 2017-01-04

Flexible 弹性盒子模型之CSS flex-grow 属性

div:nth-of-type{flex-grow:1;}div:nth-of-type{flex-grow:3;}div:nth-of-type{flex-grow:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法

wangnantjobj / 0评论 2016-12-30

html5弹性盒子模型宽度设置问题

一个id为container的div包含三个子div，第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3，为什么最后显示的宽度和预期不一样？col1宽度是200.整个container是600. col2和col3的flex比例是1

来老师 / 0评论 2014-09-16

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局属性之前

葉無聞 / 0评论 2014-08-05

css3弹性盒模型

Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性

葉無聞 / 0评论 2013-07-19

弹性盒子模型属性之flex-shrink

上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。当项目1,2,3,4,5的flex-grow比例改

前端外刊评论 / 0评论 2017-11-29

Flexible 弹性盒子模型之CSS order 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。order29.021.0-webkit-11.028.018.0-moz-9.06.1-webkit-17.0定义和用法order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。请参阅CS

编程爱好者联盟 / 0评论 2017-01-17

Flexible 弹性盒子模型之CSS align-self 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。stretch元素被拉伸以适应容器。center元素位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

前端开发 / 0评论 2017-01-13

Flexible 弹性盒子模型之CSS align-items 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。项目被拉伸以适应容器。center项目位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

编程爱好者联盟 / 0评论 2017-01-12

Flexible 弹性盒子模型之CSS flex-wrap 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-wrap 属性规定flex容器是单行或者

编程爱好者联盟 / 0评论 2017-01-10

Flexible 弹性盒子模型之CSS flex-direction

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-direction29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-direction 属性规定灵

编程爱好者联盟 / 0评论 2017-01-09

Flexible 弹性盒子模型之CSS flex-flow

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。属性flex-flow29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-flow 属性是 flex-dire

编程爱好者联盟 / 0评论 2017-01-06

Flexible 弹性盒子模型之flex

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。JavaScrip

编程爱好者联盟 / 0评论 2016-12-28