1.justify-content 属性详见(五十二)
2.flex-direction:row || row-reverse || column || column-reverse //设置主轴的方向
row:默认:
row 反向设置主轴方向:
column :主轴方向设置为纵轴方向(纵轴的方向为原来横轴的正方向);
column-reverse:主轴方向设置为纵轴方向的反方向(纵轴的方向为原来横轴的正方向)
测试代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 600px;
height: 300px;
background-color: #f0f0f0;
/*声明一个元素为伸缩盒模型,伸缩容器
1.伸缩项目 沿主轴排列(start -> end)
2.所有的伸缩项目(子元素)与父元素等高。
3.伸缩项目自动升级为块元素。
*/
display: flex;
/*主轴方向对主轴对齐的影响 默认值 flex-direction: row*/
flex-direction: row;
/*反向设置主轴*/
flex-direction: row-reverse;
/* justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;*/
/*主轴纵向*/
/*flex-direction: column;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-around;*/
/*justify-content: space-between;*/
flex-direction: column-reverse;
justify-content: flex-end;
align-items: flex-end;
/*justify-content: center;*/
/*justify-content: space-between;*/
}
.item { }
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f;}
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
3.flex-wrap:nowrap || wrap || wrap-reverse//伸缩容器对伸缩项目的包裹,当为伸缩项目设置宽度(或者高度)会造成伸缩项目沿主轴空间不足时设置
nowrap::默认当伸缩容器主轴方向空间不足,压缩伸缩项目,但不会换行
wrap:当伸缩容器主轴方向空间不足,换行显示 1.换行后,行高等于 容器的高度/行数 2.默认,侧轴拉伸基于行高。
wrap-reverse:侧轴 start 与 end 对调;
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 600px;
height: 300px;
background-color: #f0f0f0;
display: flex;
/*
伸缩容器对伸缩项目的包裹
当为伸缩项目设置宽度(或者高度)会造成伸缩项目沿主轴空间不足
默认:当伸缩容器主轴方向空间不足,压缩伸缩项目,但不会换行 flex-wrap: nowrap;
*/
flex-wrap: nowrap;
/* 当伸缩容器主轴方向空间不足,换行显示
1.换行后,行高等于 容器的高度/行数
2.默认,侧轴拉伸基于行高。
*/
flex-wrap: wrap;
/*侧轴 start 与 end 对调*/
flex-wrap: wrap-reverse;
flex-direction: column;
align-items: flex-start;
}
.item { width: 250px}
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f; }
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
4.flex-flow:row nowrap;//属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
5.align-items: flex-start | flex-end | center | stretch|baseline;//属性定义项目在侧轴(交叉轴)上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 600px;
height: 300px;
background-color: #f0f0f0;
display: flex;
/*侧轴对齐 默认值 align-items: stretch; 沿侧轴拉伸伸缩项目与伸缩容器一致*/
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
/*基线对齐
伸缩项目沿着一行中,伸缩项目基线最大(行高或者字体最大的)的基线作为其对齐依据。
*/
align-items: baseline;
}
.item { }
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f; font-size: 72px;}
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;//属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 800px;
height: 300px;
background-color: #f0f0f0;
display: flex;
/* 当伸缩容器主轴方向空间不足,换行显示
1.换行后,行高等于 容器的高度/行数
2.默认,侧轴拉伸基于行高。
*/
flex-wrap: wrap;
/*justify-content: flex-end;*/
/*当出现多行时,align-items 是基于行的 start -> end 对齐*/
/*align-items: flex-start;*/
/*当出现多行时,配合 align-content 属性一起使用,实现在伸缩容器侧轴方向对齐*/
align-content: flex-start;
align-content: center;
align-content: flex-end;
/*让多行在侧轴均匀分布*/
align-content: space-between;
align-content: space-around;
}
.item { width: 300px}
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f; }
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
图片选取:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html