（9月11日学习笔记）弹性盒

弹性盒

弹性盒布局也叫伸缩布局盒模型 flexbox 它是css3新增的一种布局方式
定义一个弹性盒：display:flex；
给容器设置了一个弹性盒后，当容器成为弹性盒后，里面的子元素默认方向为横向排列

弹性盒布局的作用：让容器有能力去控制子元素，对齐方式（位置），大小，顺序等等

专业术语解释：
轴的概念，主轴为x轴，侧轴为y轴
x轴为：左边框到右边框的距离
y轴为：上边框到底边框

在之前的布局中，把容器称为夫元素，里面的元素为子元素，在弹性盒里面，夫元素称为伸缩容器，子元素称为子项目（弹性流）
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行

伸缩容器属性:

flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）—— X轴对齐。
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式（默认不换行，且当容器宽度不够时，子元素会被挤压）
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

伸缩子元素属性
flex
flex 属性用于指定弹性子元素如何分配空间。
flex：1 就代表，剩余空间自己独占
如果三个子项目 都设置flex为1，则代表，容器被分为3份，每个子项目占1分，这时子项目自己设置宽度（横向），高度（纵向）会被覆盖

order
order 属性设置弹性容器内弹性子元素的属性:  所有默认为0，按代码书写顺序排列
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。（空余位置会被margin占掉）
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex
flex 属性用于指定弹性子元素如何分配空间。
注意：如果子元素高度或宽度其中之一不设置，则会根据排列方向（横、纵）自动沾满剩余空间

row默认  

justify-content

align-items

flex的作用：

可以分配容器剩余空间，可以帮助我们实现网页布局自适应

如果给子元素给了flex属性，则宽度则不会起作用

flex-wrap属性

圣杯布局和双飞翼布局------>统称 三列布局方式

需求：在实际开发中，为了满足中间区域优先展示
1、三列布局：两边元素宽度固定，中间内容区域自适应
2、为了满足中间内容优先在代码里面解析
   代码优先解析，书写顺序写到前面
 3、但是优先展示的元素，位置仍然还是在中间，所以需要用到order

flexgrow

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 
flex-grow,相对于flex来说，当设置了的时候，flex-grow是等分的剩余空间，需要参看自身宽度，而flex是分配所有空间，不管自身宽度

flexshink

flex-basis