【博学谷学习记录】超强总结，用心分享丨给页面添加flex布局方式

第一步：开启flex布局

给父级的css设置display：flex。

 

第二步：设置主轴的对齐方式，用justify-content:center;使得子元素居中；

 

第三步：设置主轴的对齐方式，用justify-content:space-between;使在弹性盒子里的每个子盒子之间的间距一样；

第四步：设置主轴的对齐方式，用justify-content:space-evenly;使在弹性盒子里的每个子盒子之间左右的间距一样；

第五步：设置主轴的对齐方式，用justify-content:space-around;使在弹性盒子里的每个子盒子之间左右的间距一样；

第六步：设置flex的侧轴对齐方式

align-items：添加到弹性容器
align-self :控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子 

属性值              作用

flex-start           默认值，起点开始依次排列
flex-end            终点开始依次排列
center               沿侧轴居中排列
stretch              默认值，弹性盒子沿着侧轴线被拉伸至铺满容器
注意：flex布局只适用于有父子级关系的父级。

第七步：设置侧轴的对齐方式为align-items：center;在垂直方向上是居中的了

第八步：测试前面加align-items:center; 后面又加align-items:stretch的效果：

发现后面没有层叠前面，而是加不加都一样的效果。 

第九步：如果在第八步的基础上，不设置子级的高度，则效果如下：

 

发现子级被拉伸了。其实这是因为：无论我们设置不设置align-items：stretch；拉伸都是默认就有的，当子级盒子有高度时，子级盒子不会被拉伸；如果子级盒子没有高度时，会被拉伸。

第十步：如果给父级加了align-items，则所有它的子级都改了。

第十一步：属性align-self可以给单独的某个子级设置侧轴的对齐方式。

例如：单独给第二个子级盒子设置居中：

效果：

 

 第十二步：如果子级没加高度，也没加align-items：stretch。

则子级的高度=父级的高度（弹性的表现）。

除此之外：

①当子级的侧轴对齐方式不是strrtch时，例如是center时，子级的高度=内容的高度

 

②当子级设置了高度时，则高度也不再是和父级一样高了。

第十三步：如果子级没给宽度的话，如果子级内容长，那宽度就宽，如果子级内容短，则宽度就窄。

 第十四步：弹性伸缩比

让子级的盒子一般大，设置相同的比例即可。

第二个盒子占父级剩余宽度的全部：

 

 

 刨去1盒子，把剩余的盒子分为两等分