CSS学习（二十一）-flexbox模型之二
Posted bwshqh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习（二十一）-flexbox模型之二相关的知识，希望对你有一定的参考价值。
一、理论：1.flex-flow
a.flex-direction 设置伸缩容器的伸缩流方向
b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列
2.flex-pack
a.具有与box-pack属性相同的参数
b.distribute 伸缩项目会平均分布在同一行里
c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容器的主轴起始；下一个伸缩项目的起始边缘与第一个伸缩项目的末尾边缘紧挨在一起，其他伸缩项目依次沿着主轴依次排列。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾
d.end 所起效果与start相反
e.center 所有伸缩项目边挨边放置在一起
f.justify 所有伸缩项目会平均分配在行里，沿着伸缩容器布局轴方向的任何额外空间都被平均分布于各个伸缩项目之间
3.flex-align
a.具有box-align的所有属性
b.stretch 伸缩项目拉伸填充整个伸缩容器。
二、实践：
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container >div{ width: 100%; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size:20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container > div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container > div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container > div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container > div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container > div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container > div:nth-child(6){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container{ display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-flow:row; } </style> </head> <body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div> </body> </html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container>div{
width: 50px;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size: 20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container>div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container>div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container>div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container>div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container>div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container>div:nth-child(6){
background-color: hsla(320,80%,80%,0.8);
}
.flexbox-container{
display: -ms-flexbox;
-ms-flex-flow:row;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container >div{
width: 100px;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size:20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container > div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container > div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container > div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container > div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container > div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container > div:nth-child(6){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container{
display:-ms-flexbox;
-ms-flex-direction:row wrap;
-ms-flex-flow:baseline;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</html>
三、其它：
1.以上三个都没有实现效果。不知哪位朋友知道原因前来指教一下。十分感谢：）
以上是关于CSS学习（二十一）-flexbox模型之二的主要内容，如果未能解决你的问题，请参考以下文章
C1认证学习二十二十一二十二（CSS背景属性CSS文本属性）
C1认证学习二十二十一二十二（CSS背景属性CSS文本属性）
Sanic二十一：Sanic + tortoise-orm 之模型定义