Flex弹性布局，容器属性

Flex 简介

• Flex容器(flex container):
  • 采用flex布局的元素, 称为flex容器, 简称容器
• Flex项目(flex item):
  • Flex容器中的所有成员(子元素)会自动成为该容器的成员,称为flex项目,简称项目
  • flex项目都支持宽高设置, 哪怕它之前是内联元素,类似于浮动元素

flex的容器属性

flex-direction

• 功能: 决定项目在主轴上的排列方向
• 它有四个可能的值
  | 序号 | 属性值 | 描述 |
  | ---- | -------------- | -------------------------------- |
  | 1 | row 默认值 | 主轴为水平方向,起点在左边 |
  | 2 | row-reverse | 主轴为水平方向, 起点在右边(反转) |
  | 3 | column | 主轴为垂直方向, 起点在上边 |
  | 4 | column-reverse | 主轴为垂直方向, 起点在下边 |
  

<style>
.container{
	width: 200px;
	height: 200px;
	background-color: wheat;
	border: 1px solid #444444;
}
	.container{
        display: flex;
	/*默认水平正向*/
        /*flex-direction: row;*/
        /*水平反向*/
        /*flex-direction: row-reverse;*/
        /*垂直正向*/
        /*flex-direction: column;*/
        /*垂直反向*/
        /*flex-direction: column-reverse;*/
}
span{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
</style>
<div class="container">
	<span class="item">item1</span>
	<span class="item">item2</span>
	<span class="item">item3</span>
</div>

flex-wrap

• 功能: 多个项目默认排列在一根轴线上,该属性定义了当一根轴线排列不下时,多作的项目的换行方式
  | 序号 | 属性值 | 描述 |
  | ---- | ------------- | ------------------------------------------ |
  | 1 | nowrap 默认值 | 不换行 |
  | 2 | wrap | 自动换行, 第一行排列不下, 自动转到下一行 |
  | 3 | wrap-reverse | 自动反向换行, 第一行显示在下方, 与wrap相反 |
  

<style>
.container{
	width: 200px;
	height: 200px;
	background-color: wheat;
	border: 1px solid #444444;
}
	.container{
        display: flex;
	/*默认不换行,缩放排列 */
        /*flex-wrap: nowrap;*/
        /*自动换行*/
        /*flex-wrap: wrap;*/
        /*自动反向换行/
        /*flex-wrap: wrap-reverse;*/
}
span{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
</style>
<div class="container">
	<span class="item">item1</span>
	<span class="item">item2</span>
	<span class="item">item3</span>
</div>

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

<style>
.container{
	width: 200px;
	height: 200px;
	background-color: wheat;
	border: 1px solid #444444;
}
	.container{
        display: flex;
        /*默认*/
        flex-flow: row nowrap;
}
span{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
</style>

justity-content

功能: 设置项目在主轴上的对齐方式

序号	属性值	描述
1	flex-start 默认值	左对齐
2	flex-end	右对齐
3	center	居中对齐
4	space-between	两端对齐: 项目之间间隔相等
5	space-around	项目两侧间隔相等,即项目之间间隔是项目到两端的二倍

<style>
.container{
	width: 500px;
	height: 200px;
	background-color: wheat;
	border: 1px solid #444444;
}
.container{
	display: flex;
	/*默认左对齐*/
        /*justify-content: flex-start;*/
        /*右对齐*/
        /*justify-content: flex-end;*/
        /*居中对齐*/
        /*justify-content: center;*/
        /*二端对齐, 项目之间等距排列*/
        /*justify-content: space-between;*/
        /*项目两侧间隔相等,即项目之间间隔是项目到两端的二倍*/
        /*justify-content: space-around;*/
        /*平均分配主轴上的剩余空间*/
        /*justify-content: space-evenly;*/
}
span{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
</style>
<div class="container">
	<span class="item">item1</span>
	<span class="item">item2</span>
	<span class="item">item3</span>
</div>

align-items

功能: 该属性设置项目在交叉轴上的对齐方式

序号	属性值	描述
1	flex-start	与交叉轴起点对齐, 即: 顶对齐 / 上对齐
2	flex-end	与交叉轴终点对齐, 即: 底对齐 / 下对齐
3	center	与交叉轴中间线对齐, 即: 居中对齐
4	baseline	与项目中第一行文本的基线对齐, 即文本的下边线
5	stretch 默认值	自动伸展到容器的高度(项目未设置高度或将高度设置为auto有效)

<style>
.container{
	width: 500px;
	height: 200px;
	background-color: wheat;
	border: 1px solid #444444;
}
.container{
	display: flex;
        /*与交叉轴起点对齐, 即: 顶对齐 / 上对齐*/
	/*align-items: flex-start;*/
	/*与交叉轴终点对齐, 即: 底对齐 / 下对齐*/
        /*align-items: flex-end;*/
	/*与交叉轴中间线对齐, 即: 居中对齐*/
        /*align-items: center;*/
        /*与项目中第一行文本的基线对齐, 即文本的下边线*/
        /*align-items: baseline;*/
        /*默认值: stretch*/
        /*align-items: stretch;*/
}
span{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
</style>

align-content

• align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中
• align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐
• align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式
• 该属性的重点,在于多行项目, 这是与align-items最重要的区别
  
  综合使用

        /*将container变成flex容器*/
        .container {
            display: flex;
            flex-flow: row wrap;
        }
        /*以下是项目在主轴上的排列方式*/
        .container {
            /*默认左对齐*/
            justify-content: flex-start;
            justify-content: left;
            /*右对齐*/
            justify-content: flex-end;
            /*居中对齐*/
            justify-content: center;
            /*二端对齐, 项目之间等距排列*/
            justify-content: space-between;
            justify-content: space-around;
            /*平均分配主轴上的剩余空间*/
            justify-content: space-evenly;
        }
        /*以下是项目在交叉轴上的排列方式*/
        .container {
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            /*align-items: baseline;*/
            /*默认值: stretch*/
            /*align-items: stretch;*/
        }
        /*align-content: 多行项目在交叉轴上对齐方式, 单行无效*/
        .container {
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;
        }

总结

一个弹性盒子容器的默认状态如下

.container {
/*弹性布局*/
display: flex;
  
/*以下弹性盒子容器全部属性以及默认值,即弹性盒子的默认状态*/
  
/*1. 主轴方向: 行(水平)*/
flex-direction: row;
  
/*2. 多个项目换行方式: 不换行*/
flex-wrap: nowrap;
  
/*3. 多个项目在主轴上的排列与换行方式的简写*/
flex-flow: row nowrap;
  
/*4. 多个项目在主轴上的对齐方式: 左对齐*/
justify-content: flex-start;
  
/*5. 多个项目在交叉轴上的对齐方式: 自动伸展到容器高度*/
align-item: stretch;
  
/*6. 多个项目分为多行时, 在交叉轴上排列方式: 充满整个交叉轴*/
align-content: stretch;
}