创建布局

问题导向清单

问题导向清单
问题解决方案
改变元素在包含块中的放置方式?使用 CSS position 属性。
放置元素发生相互覆盖?使用 z-index 属性设置元素的层叠顺序。
创建跟报纸页面类似的布局?使用多列布局。
将空间流式分配给容器中的元素?使用弹性盒 flex 布局。
为元素创建表格样式布局?弃用 table 元素,改用 CSS 表布局。

position

position 属性指定了元素的放置方式。

position 属性
默认值static
继承no
JavaScript 语法object.style.position="relative"
position 属性
属性说明
position: static; 静态放置方式,缺省值。元素出现在正常的文本摆放顺序(标签出现的先后顺序)中,忽略 top、bottom、left、right 和 z-index 声明。
position: relative; 相对放置方式,即相对于其正常位置放置,即在 static 静态放置方式的基础上做偏移。通过指定 left、top、right 和 bottom 属性,在静态放置方式的基础上进行偏移。因此,left: 20px; 就是在元素静态放置方式的基础上向左偏移 20px。
position: absolute; 绝对放置方式,不受任何限制的放置在容纳它的容器中,不受正常的文本摆放顺序的限制,想放哪放哪,那么就只剩下一个限制——容器限制,即相对于 position 属性值不为 缺省/static 的第一个祖先元素(通常为父元素)来放置。通过指定 left、top、right 和 bottom 属性。
position: fixed; 固定放置方式,位置是死的,元素位置相对于浏览器窗口来放置。通过指定 left、top、right 和 bottom 属性。
偏移量
属性属性值说明
left
right
top
bottom
长度
百分数
auto
为非静态放置元素设置偏移量。
  • 静态放置:块级元素独占 100% 浏览器窗口宽度,其表现为在垂直方向上和周围元素有所区别,与在元素前后放置换行符效果类似。行内元素与周围内容共享浏览器窗口宽度,即没有换行效果。

z-index 设置元素的层叠顺序

z-index 属性指定元素显示的层叠顺序。

z-index 属性的值是数值,且允许取负值。值越小,在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会排上用场。

z-index: 0; 缺省值为 0,z-index: -1; 在默认值的下层显示,z-index: 1; 在默认值的上层显示。

弹性盒

CSS3 为 display 属性增加了弹性盒(flexible box)这一盒类型,相应地开创了元素在页面上的新布局方式——弹性布局。

使用弹性布局可以创建对浏览器窗口调整响应良好的流动界面。这是通过在包含元素之间分配容器块中未使用的空间来实现的。

如果说一个页面分为3列显示,简单做法是这样的:

					
<div class="container-left"  style="width: 30%; height: 200px; background-color: red; float: left;"></div>
<div class="container-middle" style="width: 40%; height: 200px; background-color: yellow; float: left;"></div>
<div class="container-right" style="width: 30%; height: 200px; background-color: blue; float: left;"></div>
					
				

使用 百分数值+float 能够完全胜任该项工作,但是弹性盒的解决方案更优雅和高级,页面的流动性也会更好。

弹性盒由 弹性容器(flex container) 和 弹性子项(flex item) 组成。

任何一个容器都可以指定为弹性盒,进而使用弹性布局。

					
.box {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
}	
					
				

行内元素也可以指定为弹性盒,进而使用弹性布局。

					
.box {
  display: inline-flex;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
}	
					
				

浏览器对 flex 的支持:

  • Google、Safari、Opera 需加前缀 -webkit-
  • Firefox 需加前缀 -moz-
  • e 不需要

弹性盒属性

弹性容器的属性指定了:

  • 伸缩方向(主轴方向):flex-direction
  • 主轴对齐方式:justify-content
  • 弹性子项在交叉轴上的对齐方式:align-items
  • 主轴是否允许换行(允许多个主轴):flex-wrap
  • 多个主轴在交叉轴上的对齐方式:align-content
弹性盒属性
弹性盒属性说明
display
  • display: -webkit-flex;
  • display: -moz-flex;
  • display: flex;
  • display: -webkit-inline-flex;
  • display: -moz-inline-flex;
  • display: inline-flex;
元素通过设置 display 属性将其设置为弹性盒。
包含块设置为弹性盒之后,所包含元素的 float、clear、vertical-align 属性将失效。
包含块设置为弹性盒之后,所包含元素自动成为弹性子项。
flex-direction
  • flex-direction: row;

    缺省值,弹性盒伸缩方向,也叫主轴方向,从左到右伸缩。

  • flex-direction: row-reverse;

    主轴方向:从右到左伸缩。

  • flex-direction: column;

    主轴方向:从上到下伸缩。

  • flex-direction: column-reverse;

    主轴方向:从下到上伸缩。

弹性盒的伸缩方向,也叫主轴方向。

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap
  • flex-wrap: nowrap;(缺省值)

    主轴不允许换行。

  • flex-wrap: wrap;

    主轴允许换行。

  • flex-wrap: wrap-reverse;

    主轴允许倒转换行。

主轴是否允许换行。

flex-wrap: no-wrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

justify-content
  • justify-content: flex-start;(缺省值)

    向主轴起点对齐。

  • justify-content: flex-end;

    向主轴终点对齐。

  • justify-content: center;

    居中对齐。

  • justify-content: space-between;

    两端对齐。

  • justify-content: space-around;

    等间隔排列。

主轴对齐方式。

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

align-items
  • align-items: stretch;(缺省值)

    弹性子项在垂直轴拉伸填满整个容器,前提条件是子项的 width 或 height 未设置或为 auto。

  • align-items: flex-start;

stretch(缺省/默认值)
flex-start
flex-end
center
baseline
弹性盒中的弹性子项在垂直于主轴上的对齐方式。
align-contentflex-start
flex-end
center
space-between
space-around
stretch

说明:

  • 弹性容器外 及 弹性子元素内 是正常布局。弹性盒子只定义了 弹性子元素 如何在 弹性容器内 布局。
  • 当一个元素设置为弹性容器时,它的 子元素 默认成为 弹性子元素。
  • 弹性盒子只是 弹性容器 和 弹性子元素 之间的布局方式,与其祖先元素和后代元素无关。

flex-direction

flex-direction 属性指定了弹性盒的伸缩方向,该伸缩方向也叫主轴方向。

正常的 div 盒子:

div1
div2
div3

如果修改为弹性盒:

div1
div2
div3

如果一个普通容器盒被设置为弹性盒,那么依据弹性盒 flex-direction 属性指定的主轴方向,按照弹性子项出现的先后次序,依次穿起,成行排列在主轴上。

从上往下穿就是 flex-direction: column;

div1
div2
div3

justify-content

在主轴上两端对齐:

div1
div2
div3

在主轴上居中对齐:

div1
div2
div3

在主轴上等间隔排列:

div1
div2
div3

当一排放置5个 100x100px 的弹性子项时,而弹性盒的宽度只有 400px,默认只有一个主轴,那么这些弹性子项的宽度会被压缩:

div1
div2
div3
div4
div5

flex-wrap

设置 flex-wrap 属性,使主轴允许换行,也就是说,多个主轴:

div1
div2
div3
div4
div5
div6
div7
div8
div9

此时令弹性子项沿主轴居中对齐:

div1
div2
div3
div4
div5

弹性容器坐标系

固定 width、height 的弹性子元素在弹性容器内布局的实际意义并不大。

row: (s, s)

					
.flex-container-row-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (s, e)

					
.flex-container-row-se {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (e, s)

					
.flex-container-row-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (e, e)

					
.flex-container-row-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (s, s)

					
.flex-container-row-reverse-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (s, e)

					
.flex-container-row-reverse-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-content: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (e, s)

					
.flex-container-row-reverse-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-content: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (e, e)

					
.flex-container-row-reverse-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-content: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

让弹性子元素弹起来

不设置弹性子元素的 width 或/和 height 的弹性盒子运用比较广泛。

row: (s, stretch)

					
.flex-container-default {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             //缺省值
  justify-content: flex-start;     //缺省值
  align-items: stretch;            //缺省值
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

row: (s, s)

					
.flex-container-row-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;            
  justify-content: flex-start;    
  align-items: flex-start;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (s, e)

					
.flex-container-row-se {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-start;     
  align-items: flex-end;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (e, s)

					
.flex-container-row-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-end;       
  align-items: flex-start;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (e, e)

					
.flex-container-row-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-end;       
  align-items: flex-end;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

flex-container flex-wrap 属性

flex-container 默认排满一行或一列。flex-container flex-wrap 属性允许排满多行或多列。

默认排满一行:

					
.flex-container {
  display: flex;
  display: -webkit-flex;
  width: 500px;
  height: 400px;
  flex-direction: row;            
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3
flex-item_4
flex-item_5
flex-item_6
flex-item_7
flex-item_8
flex-item_9

允许多行或多列:

					
.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;                //缺省值
  flex-wrap: wrap;
  justify-content: flex-start;        //缺省值
  align-items: flex-start;            //缺省值
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3
flex-item_4
flex-item_5
flex-item_6
flex-item_7
flex-item_8
flex-item_9

flex-container display 属性

					
<!DOCTYPE html>
<html>
  <head>
    <style type="text/javascript">
      .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 300px;
        background-color: white;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 10px;
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
      <div class="flex-item">flex item 4</div>
      <div class="flex-item">flex item 5</div>
    </div>
  </body>
</html>
					
				

效果如下:

flex item 1
flex item 2
flex item 3
flex item 4
flex item 5

说明:

  • 弹性子元素通常在弹性盒子内 一行 显示。默认情况每个弹性容器只有一行。
					
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
					
				

效果如下:

flex item 1
flex item 2
flex item 3

弹性子元素 设置不当可能会溢出 弹性容器:

flex item 1
flex item 2
flex item 3

溢出部分对弹性盒子外内容的影响。

flex-container flex-direction 属性

缺省/默认值 或者 flex-direction: row;

用一条刚性(无弯曲)水平线 按照弹性子元素出现的先后顺序 将弹性子元素 从左到右 串起,无换行。如果水平宽度不够,那么将按照弹性子元素的初始宽度比压缩弹性子元素内容的宽度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: row-reverse;

row 反转:用一条刚性(无弯曲)水平线 按照弹性子元素出现的先后顺序 将弹性子元素 从右到左 串起,无换行。如果水平宽度不够,那么将按照弹性子元素的初始宽度比压缩弹性子元素内容的宽度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: column;

用一条刚性(无弯曲)垂直线 按照弹性子元素出现的先后顺序 将弹性子元素 从上到下 串起,无换行。如果垂直高度不够,那么将按照弹性子元素的初始高度比压缩弹性子元素内容的高度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: column-reverse;

用一条刚性(无弯曲)垂直线 按照弹性子元素出现的先后顺序 将弹性子元素 从下到上 串起,无换行。如果垂直高度不够,那么将按照弹性子元素的初始高度比压缩弹性子元素内容的高度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-container justify-content 属性

往串线开始(第一个弹性子元素)的方向靠:

					
.flex-container {
  justify-content: flex-start;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线结束(最后一个弹性子元素)的方向靠:

					
.flex-container {
  justify-content: flex-end;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线中间对齐:

					
.flex-container {
  justify-content: center;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线两边对齐:

					
.flex-container {
  justify-content: space-between;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

弹性子元素等间隔排列:

注意串线两头的弹性子元素与弹性容器壁之间的间隔,这两个间隔宽度的加和是一个完整的弹性子元素之间的等间隔宽度。

					
.flex-container {
  justify-content: space-around;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

flex-container align-items 属性

					
.flex-container {
  align-items: flex-start;
}

.flex-item {

}
					
				

flex-direction: row; //或者缺省

flex item1flex item1flex item1flex item1flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3
					
.flex-container {
  align-items: flex-end;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

我对弹性盒子的理解——烧烤炉子

我有一个烧烤炉子,默认只有一根签子,我把要烧烤的元素用签子串起来,我总是先串第一个元素,然后串第二个元素,这样按照顺序依次串起所有元素。因为我只有这一根签子,又必须一次性把所有烧烤元素都串起来,炉子长的话签子就长,这些烧烤元素就不会拥挤;炉子短的话签子就短,这些烧烤元素就要被压扁,变形,挤一挤了。

前、后、左、右四个方向都能摆放签子:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。横着串(row)只会影响烧烤元素内容的宽度,因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的宽度对我的烧烤元素有所影响。

站在左边烧烤:

					
.flex-container {
  flex-direction: row;   //或者缺省
}
					
				

站在右边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。横着串(row)只会影响烧烤元素内容的宽度,因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的宽度对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: row-reverse;   
}
					
				

站在前边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。竖着串(column)只会影响烧烤元素内容的高度(长度),因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的高度(长度)对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: column;   
}
					
				

站在后边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。竖着串(column)只会影响烧烤元素内容的高度(长度),因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的高度(长度)对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: column-reverse;   
}