从零开始学习HTML+CSS（4）Flex布局中的排列与换行

0.参考网址：https://www.runoob.com/w3cnote/flex-grammar.html
1.排列

• 默认值：横向排列（从左边开始排）

div
{
	display:flex;/*设置为flex布局*/
	flex-direction:row;/*这是默认值，此行可以不写*/
}

• 横向排列（从右边开始排）

div
{
	display:flex;/*设置为flex布局*/
	flex-direction:row-reverse;
}

• 纵向排列（从顶部开始排）

{
	display:flex;/*设置为flex布局*/
	flex-direction:column;
}

• 纵向排列（从底部开始排)

{
	display:flex;/*设置为flex布局*/
	flex-direction:column-reverse;
}

2.换行

• 默认值：不换行

{
	display:flex;/*设置为flex布局*/
	flex-wrap: nowrap；
}

• 换行且第一行在上方

{
	display:flex;/*设置为flex布局*/
	flex-wrap: wrap；
}

• 换行且第一行在下方

{
	display:flex;/*设置为flex布局*/
	flex-wrap: wrap-reverse；
}

3.也可以把上述两种属性写在一行

{
	flex-flow:  row nowrap;
}