CSS day05弹性盒子

弹性布局：把父元素设置为弹性容器，可以控制子元素的位置和尺寸，弹性布局必须是父子嵌套关系才能使用，其实就是浏览器根据参数自动计算元素的位置和尺寸，弹性布局不会让元素脱离正常文档流

display：flex；这个属性是把元素设置成弹性盒子，给父元素设置

flex-direction：row/column；这个属性是设置子元素在主轴（x轴/横轴）或者侧轴（y轴/竖轴）对齐，row为主轴，column为侧轴。设置了弹性盒子，子元素默认在主轴对齐，给父元素设置

代码展示：

浏览器效果：

justify-content：center/flex-start/flex-end/space-around/space-between/space-evenly;这个属性是设置子元素在主轴的对齐方式，给父元素设置

center：子元素在主轴居中展示

flex-start：子元素靠左对齐

flex-end：子元素靠右对齐

space-aroud：子元素之间自动产生间距，每个间距不相等

space-between：子元素之间产生间距，开始和结束位置没有间距

space-evenly：子元素之间产生相等的间距

 align-items：center/flex-start/flex-end；设置子元素在侧轴的对齐方式，给父元素设置。

弹性布局遇到所有子元素的宽度相加超出父元素的宽度，默认情况下，子元素宽度会进行收缩，不想子元素收缩可以设置超出部分换行：flex-wrap：wrap/no-wrap；wrap为换行，no-wrap为不换行，给父元素设置

align-content：flex-start/flex-end/space-around/space-between/space-evenly；这个属性一般配合换行使用，其属性值作用和justify-content差不多，只不过是相对于侧轴，给父元素设置

flex-start：子元素靠上对齐

flex-end：子元素靠下对齐

space-aroud：子元素之间自动产生间距，每个间距不相等

space-between：子元素之间产生间距，开始和结束位置没有间距

space-evenly：子元素之间产生相等的间距

 flex-shrink：0；设置收缩属性，为0不收缩，为其他值会进行收缩

older属性和align-self属性：通过给子元素设置align-self属性控制子元素在父元素的侧轴的位置，这个属性的属性值和上面align-content差不多一样，作用也差不多，通过older的属性值控制子元素渲染的先后顺序，older的属性值越大越先渲染出来，就是谁的值越大那它就在最上面，这两个都是给子元素设置，针对单个子元素的操作。

flex-grow：1；子元素按1：1的比例来分割父元素，就是每个子元素占的位置一样，给子元素设置的，也可以给每个子元素设置不一样的属性值让他们的占比不一样，没设置的元素会默认按自己的大小占比

flex-basis：10px；这个属性是设置子元素的尺寸，但是只能设置宽和高其中一个，主要看你flex-direction属性设置的是主轴对齐还是侧轴对齐，主轴就是设置宽，侧轴就是设置高，这个属性是给子元素设置的