<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* flex-direction */
/* div{
display:flex;
width: 16rem;
height: 8rem;
background: pink;
flex-direction: column-reverse;
}
div span{
width: 4rem;
height: 2.6667rem;
background: red;
} */
/* justify-content */
/* div{
display:flex;
width: 21.3333rem;
height: 8rem;
background: pink;
flex-direction: row;
justify-content: space-between;
}
div span{
width: 4rem;
height: 2.6667rem;
background: red;
} */
/* flex-wrap */
/* div{
display:flex;
width: 13.3333rem;
height: 8rem;
background: pink;
flex-direction: row;
flex-wrap: wrap;
}
div span{
width: 4rem;
height: 2.6667rem;
background: red;
} */
/* align-items*/
/* div{
display:flex;
width: 13.3333rem;
height: 8rem;
background: pink;
flex-direction:row;
justify-content: center;
align-items:center;
}
div span{
width: 4rem;
height: 2.6667rem;
background: red;
} */
/* align-content*/
/* div{
display:flex;
width: 21.3333rem;
height: 16rem;
background: pink;
flex-direction:row;
flex-wrap: wrap;
align-content: stretch;
}
div span{
width: 4rem;
background: red;
margin: .2667rem;
} */
/* flex-flow*/
div{
display:flex;
width: 21.3333rem;
height: 8rem;
background: pink;
/* flex-direction: column;
flex-wrap: wrap; */
flex-flow:column wrap;
}
div span{
width: 4rem;
height: 2.6667rem;
background: red;
}
</style>
<body>
<!-- flex-direction -->
<!-- <div>
<span>1</span>
<span>2</span>
<span>3</span>
</div> -->
<!-- justify-content -->
<!-- <div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div> -->
<!-- flex-wrap-->
<!-- <div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> -->
<!--align-items-->
<!-- <div>
<span>1</span>
<span>2</span>
<span>3</span>
</div> -->
<!--align-content-->
<!-- <div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div> -->
<!--flex-flow-->
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
<!--
设置主轴方向
设置子元素是跟着主轴来排序的方式
默认的主轴是X 轴 Y轴是侧轴
flex-direction:{
row 默认值 从左到右
row-reverse 翻转 从右到左
主轴是Y 轴 X轴是侧轴
column 设置主轴方向 从上到下
column-reverse 翻转 从下到上
}
设置主轴上的子元素 排序
默认从头开始排序
justify-content:{
flex-start 默认值 从头开始排序 如果主轴是X轴，则是从左到右
flex-end 从尾开始排序
center 居中
space-around 平均分配
space-between 两边贴边 剩余分配给中间
}
设置主轴上的子元素换行
默认不换行
flex-wrap:{
nowrap 默认不换行
wrap 换行
}
设置侧轴上的子元素水平垂直居中配和 justify-content:center
使用于单行
align-items:{
center 居中
stretch 拉伸高度 注意：子元素不能设置高度不然不生效
}
设置侧轴上的子元素排序多行 注意 要和flex-wrap:wrap
使用于多行
align-content:{
flex-start; 默认在侧轴从头开始排序
flex-end; 在侧轴的从尾开始开始排序
center; 居中
space-around; 子项在侧轴平均分配剩下空间
space-between; 子项在侧轴先分布在两头，再平分剩余空间
stretch; 设置子项高度平分父元素的高度 注意：子元素不能设置高度不然不生效
}
该属性是 flex-direction 和 flex-wrap 简写
flex-flow:{
flex-flow:column wrap; == flex-direction: column; flex-wrap: wrap;
}
-->
