flex布局（flex容器，flex属性）

---

前言

本篇文章中主要归纳flex布局弹性元素的属性和弹性容器的属性，以及使用flex布局制作导航栏。

---

一、flex（Flexible Box）概述

1.概述：Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
2.1 任何一个容器都可以指定为flex布局。

.box{
   
	display:flex;
}

2.2 内元素也可以使用Flex布局；

.box{
   
	display:inline-flex
	}

2.3 webkit内核的浏览器，必须加上webkit前缀。

.box{
   
	display:webkit-flex;
	display:flex;
}

注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将失效。

二、flex容器，flex属性

1.flexBox弹性模型

采用Flex布局的元素，称为flex容器，简称“容器”。它的子元素自动成为容器成员，称为flex项目，简称“项目”。

2.基本概念详解

• 弹性容器：给元素添加display:flex后就是弹性容器。
• 弹性属性：弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。

注意点：1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。水平的不一定就是主轴。
2.每根轴都是起点和终点，这对于元素的对齐非常重要。
3.弹性元素也可以通过display:flex设置为另一个弹性容器。形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
4.弹性元素的两根轴非常重要，所有属性都是作用于轴的。

3.弹性容器的属性

属性	含义
flex-direction	主轴方向
flex-wrap	换行
flex-flow	flex-direction和flex-wrap合写
justify-content	主轴上的对其方式
align-items	交叉轴上的对齐方式（单行）
align-content	交叉轴上多行/多列对齐方式

1. flex-direction属性：属性值决定主轴的方向。（弹性元素永远沿主轴排列）

//css设置
.box{
   
				/* display: -webkit-box; */
		display: flex;
		flex-direction: row;
		width:600px;
		height: 300px;
		background