弹性盒子

一、CSS3弹性盒子
弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

二、css3弹性盒子的所有属性
*1.flex-direction属性====>>决定项目的方向*
flex-direction有四个属性值分别为：row || row-reserve || column || column-reverse
[row]:默认值，元素水平显示，一行排列
[row-reserve]:和row一样一行排列，但是它和row的排列方向相反
[column]:元素垂直显示，就是一列
[column-reverse]:和column一样是一列，但是排列顺序的颠倒的
*2.flex-wrap属性====>>决定元素单行还是多行*
flex-wrap有三个属性值分别为：nowrap || wrap || wrap-reserve
[nowrap]:默认值，元素在一行排布，不换行
[wrap]:元素在必要的时候进行换行
[wrap-reserve]:元素在必要的时候进行换行，但是它是以相反的顺序排列的
3.flex-flow属性
flex-flow属性是flex-directio和flex-wrap的简写形式，默认值是 row nowrap
*4.align-items属性====>>定义盒子在在纵轴上的对齐方式*
align-items有五个属性值分别为：stretch || center || flex-start || flex-end || baseline
[stretch ]:默认值，拉伸项目来适应布局
[center ]:项目在容器的中心排列
[lex-start]:项目从容器的开始位置排列
[flex-end]:项目从容器的结尾地方开始排列
[baseline]:项目的位置在容器的基线上
容器基线：
*5.justify-content属性====>>定义盒子在横轴上的对齐方式*
justify-content属性有五个属性分别为：flex-start || flex-end || center ||| space-around || space-between
[flex-star]:默认属性，项目位于盒子的开头
[flex-end]:项目位于容器的结尾
[center]:项目位于容器的中心
[space-around]:项目在每一行的前后左右都留有空白的位置
[space-between]:在容器内。各行之前都留有空白

三、弹性子元素属性
弹性子元素属性一共有六种分别为：order || flex-grow || flex-shrink || flex-basis || flex || align-self
[order ]:设置弹性盒子子元素的排列顺序
[flex-grow ]:设置或者检索弹性盒子元素的扩展比率
[flex-shrink]:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容 器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
[flex-basis ]:用于设置或是检索弹性盒子伸缩基准值
[flex]:设置弹性和盒子的子元素如何分配空间
[align-self`]:在弹性子元素上使用，覆盖容器的align-items属性