弹性布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
弹性布局：以下建议使用开发者工具修改值进行查看非常直观易懂。
弹性布局属性使用顺序：
一，父元素属性设置顺序：
以下四个属性是对主轴方向上的子元素进行调整：
1，设置弹性盒子 display:flex;
2，确定主轴及其排列方向，这个值已经确定了排列方向，下面所有子元素都一样，
如果是从左到右，那么下面也都是确定从左到右排列，不能改变。
flex-direction:
row; 默认值，从左到右排列
row-reverse; 从右到左排列
column; 从上到下排列
column-reverse; 从下到上排列
3，设置是否换行(flex-direction已经确定排列方向，不能改变，谨记别出错了。)
flex-wrap:
nowrap; 默认值，不进行换行，可能溢出。
wrap; 换行，第一行排不下，第二行排列。。。(从左到右)
wrap-reverse; 跟wrap相反，最后一行从左到右排列，倒数第二行从左到右排列。。。
4，设置主轴方向上子元素的排列位置
justify-content:
flex-start; 所有子元素在主轴开始位置堆叠
flex-end; 所有子元素在主轴结束位置堆叠
center; 所有子元素在主轴中间堆叠
space-around; 所有子元素在主轴方向上的两边边距相等(ml=mr或者mt=mb)
space-between; 主轴两端子元素靠边，另外所有子元素之间的间距相等
space-evenly; 所有子元素之间的边距，及其两端子元素到到边的边距相等。
以下两个属性是对侧轴方向的子元素进行调整：
5，设置侧轴方向上子元素的排列位置
align-content:
stretch; 默认。各行将会伸展以占用剩余的空间。
flex-start; 所有子元素在侧轴开始位置堆叠
flex-end; 所有子元素在侧轴结束位置堆叠
center; 所有子元素在侧轴中间堆叠
space-around; 所有子元素在侧轴方向上的两边边距相等(ml=mr或者mt=mb)
space-between; 侧轴两端子元素靠边，另外所有子元素之间的间距相等
space-evenly; 所有子元素之间的边距，及其两端子元素到到边的边距相等。
6，设置好以上5个属性基本可以排列好子元素位置：
align-items:
各个值解析:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
二，实例
1，flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
2，举例：其中固定一个值 flex-direction:column-reverse; 即：竖直从上往下排列为：4321
其中 justify-content的值分别等于：
flex-start 时 子元素 1 靠父元素的底边
flex-end 时 子元素 4 靠父元素的上边
cneter 时 所有子元素上下居中排列
space-around 时 每个子元素的margin-top/margin-bottom都相等
space-between 时 元素1靠父元素底边，元素4靠父元素上边，每两个元素之前的边距相等
space-evenly 时 元素1与父元素底边，元素4与父元素上边，以及元素与元素之前的边距相等。
即所有边距相等。
3，align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。即：与主轴垂直的方向。
固定其中两个值：
flex-direction:column-reverse; 主轴排列方式为垂直反向排列，即从上往下：4321
justify-content:space-evenly; 所有的外边距都相等。
主轴垂直反向排列，所以元素排列为一竖，所以align-items就是确定该竖的位置
当align-items值分别等于：
flex-start 时 该竖靠父元素左边
flex-end 时 该竖靠父元素右边
center 时 该竖左右居中
baseline 时 该竖靠父元素左边(等价于flex-start)
stretch 时 该竖靠父元素左边(如果width没有定义，那么会把元素拉伸到最大宽度)
这里可以注释掉如下样式中的 .container > span 中的width，
并且使用开发者工具进行查看就可清楚。
三，CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性:
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。
</title>
</head>
<style>
.container{
width: 500px;
height: 500px;
background: lightgrey;
display: flex;
flex-wrap: wrap;
flex-direction:column-reverse;
justify-content:flex-start;
align-content: flex-start;
align-items:stretch;
}
.container > span{
background: #0f0;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<body>
<div class="container">
<span class="one1" style="background: blue">001</span>
<span class="one2" style="background: green">002</span>
<span class="one3" style="background: yellow">003</span>
<span class="one4" style="background: orange">004</span>
<span class="one5" style="background: #0f0">004</span>
<span class="one6" style="background: #f3f">004</span>
<span class="one7" style="background: #553">004</span>
<span class="one8" style="background: #2f8">004</span>
</div>
</body>
</html>
order排序语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
排序语法
1，order默认值都是0，可以是负数，值越小排列越靠前，值越大排列越靠后面。
2，子元素： ABCD
所有子元素都不设置order值，默认值为0。
如果设置B的 order > 0 则排列在最后面
如果设置B的 order = 0 则所有排列不变
如果设置B的 order < 0 则B排列在最前面
</title>
</head>
<style>
.container{
width: 530px;
height: 530px;
background: #eee;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
align-items: center;
}
.flex-item{
width: 100px;
height: 100px;
}
.one1{
/*order:1;*/
}
.one2{
order:-1;
}
.one3{
/*order:1;*/
}
.one4{
/*order:1;*/
}
.one5{
/*order:1;*/
}
.one6{
/*order:1;*/
}
.one7{
order:-5;
}
</style>
<body>
<div class="container">
<span class="flex-item one1" style="background: #f00">flex-item 1</span>
<span class="flex-item one2" style="background: #0f0">flex-item 2</span>
<span class="flex-item one3" style="background: #00f">flex-item 3</span>
<span class="flex-item one4" style="background: #0ff">flex-item 4</span>
<span class="flex-item one5" style="background: #f0f">flex-item 5</span>
<span class="flex-item one6" style="background: #e9f">flex-item 6</span>
<span class="flex-item one7" style="background: #77e">flex-item 7</span>
</div>
</body>
</html>
在弹性盒子里面设置margin的值为“auto”，进行各种居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
对齐：
1，在弹性盒子里面只要使用:
margin:auto;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。
所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
同理，设置水平方向上的margin-left/right值为“auto”,可以使子元素在弹性容器的水平方向左右居中。
此外，如果同一行有ABC三个子元素，设置B子元素margin-right:auto;
那么AB靠左边堆叠，C直接靠右顶边。
如果给B设置margin-left:auto;margin-right;
那么弹性盒子的宽度减去三个子元素的宽度，B就会相对剩余空间左右居中。即左右边距相等。
</title>
</head>
<style>
.container{
width: 530px;
height: 330px;
background: #0ff;
margin-top: 30px;
display: flex;
/*flex-direction: row;*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start;*/
/*align-content: flex-start;*/
}
.flex-item{
display: inline-block;
height: 100px;
width: 100px;
}
.one{
margin-right: auto;
margin-left: auto;
}
.two{
margin-right: auto;
}
.three{
margin-left: auto;
}
.four{
margin: auto;
}
</style>
<body>
<h3>
在弹性盒子里面只要使用
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。
所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
同理，设置水平方向上的margin-left/right值为“auto”,可以使子元素在弹性容器的水平方向左右居中。
</h3>
<h4>设置第二个子元素margin-left/margin-right:auto;就会平均分配在弹性盒子中剩下的空间给左右边距。</h4>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<span class="flex-item one" style="background: #ff0">左右外边距相等</span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item two" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item three" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item four" style="background: #0f0">上下左右绝对居中</span>
</div>
</body>
</html>
align-self 属性是相对于侧轴对子元素本身沿着侧轴方向上进行位置设定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
1，align-self 属性用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。
总而言之：最好可以使用开发者工具进行设置。
2，align-content 设置侧轴方向上的行/列的位置，
align-slef 是设置侧轴方向上的行内/列内的子元素的位置
所以，如果设置了align-content，再设置align-self 是无效的。
具体，具体请使用开发者工具进行调试，简单易懂。
</title>
</head>
<style>
.flex-container{
padding: 30px;
width: 600px;
height: 500px;
background: #624F5E;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 50px;
}
.flex-item{
height:123px;
}
.flex-1{
background: #f00;
align-self: flex-start;
margin-right: auto;
margin-left: auto;
}
.flex-2{
background: #ff0;
}
.flex-3{
background: #f0f;
align-self: flex-end;
}
.flex-4{
background: #0f3;
}
.flex-5{
background: #dd3;
}
.flex-6{
background: #233;
align-self: flex-end;
}
.flex-7{
background: #a3e;
align-self: flex-start;
}
.flex-container-div{
width: 500px;
height: 500px;
background: #624F5E;
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*align-content: space-between;*/
}
.flex-item-div{
width: 100px;
height: 100px;
}
.flex-item-div1{
background: #f00;
align-self: flex-start;
margin-right: auto;
margin-left: auto;
}
.flex-item-div2{
background: #ff0;
}
.flex-item-div3{
background: #f0f;
align-self: flex-end;
}
.flex-item-div4{
background: #0f3;
}
.flex-item-div5{
background: #dd3;
}
.flex-item-div6{
background: #233;
align-self: flex-end;
}
.flex-item-div7{
background: #a3e;
align-self: flex-start;
}
.flex-item-div8{
background: #f0f;
align-self: flex-end;
}
.flex-item-div9{
background: #0f3;
}
.flex-item-div10{
background: #dd3;
}
</style>
<body>
<h3>
以下所有的flex-item都没有设置width，flex-wrap:wrap;设置可以换行;
flex-direction:column主轴为：垂直从上到下排列，子元素比较多，所以换行排列。
因为没有设置width，默认会占满剩余空间。
如果子元素只够排一列，那么子元素width的值默认是弹性盒子宽度的100%，该宽度就是侧轴及其方向
如果子元素排两列，那么子元素width的值是弹性盒子的宽度的50%，该宽度就是侧轴及其方向
如果子元素排三列，那么子元素width的值是弹性盒子的宽度的33.3%，该宽度就是侧轴及其方向
如果子元素排四列，那么子元素width的值是弹性盒子的宽度的25%，该宽度就是侧轴及其方向
谨记：align-self是相对于侧轴及其方向上进行位置设定的。如果子元素侧轴宽/高度固定那么该属性就无效了。
align-self:
auto; 子元素自定拉伸宽度 = 侧轴的最大宽度
flex-start; 子元素位于侧轴起点
flex-end; 子元素位于侧轴终点
center; 子元素位于侧轴中间
baseline; 如弹性盒子元素的行内轴与侧轴为同一条，
则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
如果没有设置宽度，那么该子元素的宽度为内容撑开。
stretch; 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
但同时会遵照'min/max-width/height'属性的限制。
</h3>
<div class="flex-container">
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<!-- <span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span>
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span> -->
</div>
<div class="flex-container-div">
<div class="flex-item-div flex-item-div1">flex-item-div 1</div>
<div class="flex-item-div flex-item-div2">flex-item-div 2</div>
<div class="flex-item-div flex-item-div3">flex-item-div 3</div>
<div class="flex-item-div flex-item-div4">flex-item-div 4</div>
<div class="flex-item-div flex-item-div5">flex-item-div 5</div>
<div class="flex-item-div flex-item-div6">flex-item-div 6</div>
<div class="flex-item-div flex-item-div7">flex-item-div 7</div>
<div class="flex-item-div flex-item-div8">flex-item-div 8</div>
<div class="flex-item-div flex-item-div9">flex-item-div 9</div>
</div>
</body>
</html>
flex 属性是针对主轴方向上剩余空间进行分配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
flex 属性用于指定弹性子元素如何分配空间--指：分配主轴一行/一列中剩余的空间。
flex的值可以直接是非负数(即：可以是0，小数，正整数)。
我的理解是：以下三个属性中只有flex-grow才起作用。所以以下值少做了解即可。
官方各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
以上缩写的三个值分别代表：
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
flex-flow:row nowrap;在不可以换行的情况下：
子元素堆叠没有溢出，且在主轴方向上有多余空间，flex设置才有效。
溢出或没有空间，flex属性就是无效的。
flex-flow:row wrap;在可以换行的情况下：
flex属性是针对在主轴方向上，每一行子元素堆叠剩余空间的分配。
每个子元素最小宽/高不会小于先前已经设定的值。
如果给子元素对象设置一个margin-left值过大而当前行装不下，则立马自动换行。
实例：一个弹性盒子中一行有ABC三个子元素堆叠一起(每个元素的宽高都是100px)，没有溢出
且display:flex; flex-flow:row wrap; 在主轴方向上向左堆叠还剩余200px空间。
1，给子元素分别设置flex属性 如： A[flex:1] B[flex:2] C[flex:2]
即： 200px/5 = 40px;
A子元素的宽度 = 100px + 40px = 140px;
B子元素的宽度 = 100px + 40px * 2 = 180px;
C子元素的宽度 = 100px + 40px * 2 = 180px;
2，给子元素分别设置flex属性 如： A[flex:1] B[flex:2] C[flex:2]
即： 200px/5 = 40px;
A子元素的宽度 = 100px + 40px = 140px;
B子元素的宽度 = 100px + 40px * 2 = 180px;
C子元素的宽度 = 100px + 40px * 2 = 180px;
3，其他同上，唯一不同的是弹性盒子里面只有一个元素A。
即： 200px/1 = 200px;
A子元素的宽度 = 100px + 200px * 1 = 300px;
最好的做法：给所有子元素都添加：
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
然后使用开发者工具进行测试即可。
</title>
</head>
<style>
.flex-container{
width: 550px;
height: 440px;
background: #ddd;
/*padding:20px;*/
display: flex;
flex-flow: row wrap;
margin-top: 30px;
}
.flex-item{
width: 100px;
height: 100px;
display: inline-block;
}
.flex-item-1{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-2{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-3{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-4{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#0ff;
}
.flex-item-5{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-6{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-7{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-8{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#091D77;
}
.flex-item-9{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#C326C5;
}
.flex-item-10{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#F2A241;
}
.fct{
flex-flow: row nowrap;
}
</style>
<body>
<div class="flex-container">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
<div class="flex-container fct">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
