FLEX布局
flex-direction
-
row默认值：主轴为水平方向，起点在左端。
-
row-reverse：主轴为水平方向，起点在右端，容器成员顺序与row顺序相反。
-
column：主轴为垂直方向，起点在上沿。
-
column-reverse：主轴为垂直方向，起点在下沿，容器成员顺序与column顺序相反。
<div id="t1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!--
3
2
2
-->
<style type="text/css">
#t1{
display: flex;
flex-direction: column-reverse;
}
</style>
flex-wrap
-
nowrap默认：不换行，当空间不足时，会按轴线方向成员大小比例缩小的成员
-
wrap：距离不够时换行，新起一行排列
-
wrap-reverse：距离不够时换行，新起的一行在上方
<div id="t2" style="width: 20px;">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!--
45
6
-->
<style type="text/css">
#t2{
display: flex;
flex-wrap: wrap;
}
</style>
flex-flow
<div id="t3" style="width: 20px;">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<!--
87
9
-->
<style type="text/css">
#t3{
display: flex;
flex-flow: row-reverse wrap;
}
</style>
justify-content
-
flex-start默认值：左对齐
-
flex-end：右对齐
-
center： 居中对齐
-
space-between：两端对齐，成员之间的间隔都相等。
-
space-around：每个成员两侧的间隔相等，成员之间的间隔比成员与边框的间隔大一倍。
<div id="t4">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<!-- abc[水平居中] -->
<style type="text/css">
#t4{
display: flex;
justify-content: center;
}
</style>
align-items
-
stretch默认值：如果成员未设置高度或设为auto，将占满整个容器的高度。
-
flex-start：交叉轴的起点对齐。
-
flex-end：交叉轴的终点对齐。
-
center：交叉轴的中点对齐。
-
baseline: 成员的第一行文字的基线对齐。
<div id="t5" style="height: 50px;">
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<!-- def[垂直居中] -->
<style type="text/css">
#t5{
display: flex;
align-items: center;
}
</style>
align-content
-
stretch默认值：轴线占满整个交叉轴。
-
flex-start：与交叉轴的起点对齐。
-
flex-end：与交叉轴的终点对齐。
-
center：与交叉轴的中点对齐。
-
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
-
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
<div id="t6" style="height: 50px;width: 20px;">
<div>g</div>
<div>h</div>
<div>i</div>
</div>
<!--
g
hi
[交叉轴space-between]
-->
<style type="text/css">
#t6{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
</style>
order
<div class="flexBox">
<div style="order: 3;">j</div>
<div style="order: 1;">k</div>
<div style="order: 2;">l</div>
</div>
<!-- klj -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
flex-grow
<div class="flexBox">
<div style="flex-grow: 1;">m</div>
<div style="flex-grow: 2;">n</div>
<div style="flex-grow: 3;">o</div>
</div>
<!-- m n o -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
flex-shrink
<div class="flexBox" style="width: 100px;">
<div style="flex-shrink: 1;width: 100px;">p</div>
<div style="flex-shrink: 2;width: 100px;">q</div>
<div style="flex-shrink: 3;width: 100px;">r</div>
</div>
<!-- p q r -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
flex-basis
<div class="flexBox">
<div>s</div>
<div style="flex-basis: 40px;">t</div>
<div>u</div>
</div>
<!-- s t u -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
flex
<div class="flexBox">
<div style="flex: 1;">v</div>
<div style="flex: 1;">w</div>
<div style="flex: 1;">x</div>
</div>
<!-- v w x -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
align-self
<div class="flexBox" style="height: 50px;">
<div>y</div>
<div style="align-self: center;">z</div>
<div>0</div>
</div>
<!-- y z 0 -->
<style type="text/css">
.flexBox{
display: flex;
}
</style>
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<!DOCTYPE html>
<html>
<head>
<title>FLEX布局</title>
</head>
<body>
<div id="t1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!--
3
2
2
-->
<div id="t2" style="width: 20px;">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!--
45
6
-->
<div id="t3" style="width: 20px;">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<!--
87
9
-->
<div id="t4">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<!-- abc[水平居中] -->
<div id="t5" style="height: 50px;">
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<!-- def[垂直居中] -->
<div id="t6" style="height: 50px;width: 20px;">
<div>g</div>
<div>h</div>
<div>i</div>
</div>
<!--
g
hi
[交叉轴space-between]
-->
<div class="flexBox">
<div style="order: 3;">j</div>
<div style="order: 1;">k</div>
<div style="order: 2;">l</div>
</div>
<!-- klj -->
<div class="flexBox">
<div style="flex-grow: 1;">m</div>
<div style="flex-grow: 2;">n</div>
<div style="flex-grow: 3;">o</div>
</div>
<!-- m n o -->
<div class="flexBox" style="width: 100px;">
<div style="flex-shrink: 1;width: 100px;">p</div>
<div style="flex-shrink: 2;width: 100px;">q</div>
<div style="flex-shrink: 3;width: 100px;">r</div>
</div>
<!-- p q r -->
<div class="flexBox">
<div>s</div>
<div style="flex-basis: 40px;">t</div>
<div>u</div>
</div>
<!-- s t u -->
<div class="flexBox" style="height: 50px;">
<div>y</div>
<div style="align-self: center;">z</div>
<div>0</div>
</div>
<!-- y z 0 -->
</body>
<style type="text/css">
#t1{
display: flex;
flex-direction: column-reverse;
}
#t2{
display: flex;
flex-wrap: wrap;
}
#t3{
display: flex;
flex-flow: row-reverse wrap;
}
#t4{
display: flex;
justify-content: center;
}
#t5{
display: flex;
align-items: center;
}
#t6{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.flexBox{
display: flex;
}
</style>
</html>
服务热线 19970861797
