本文介绍Flexbox布局模型的基础知识，包括如何通过设置display属性来开启弹性盒模型，以及父容器和子元素的主要属性，如justify-content、align-items和flex-grow等，并解释了它们的作用。
伸缩盒模型：flexbox要开启弹性盒模型，只需要设置display的属性值flex,因为他是 css3中dislplay新添加的值的类型。目的：在浏览器窗口变化时候i，盒子相应改变大小。设置了弹性盒模型后，float，clear盒vertical-align在flex中不起作用。
父容器中常用属性
display：flex
定义一个flex容器
设置父元素是一个弹性盒，子元素会自动水平排列。
justify-content：flex-end；
设置或检索弹性盒子原不俗在主轴（横轴）方向上的对齐方式。
flex-end；项目位于容器的结尾
flex-star；项目位于容器的开头
space-between；项目位于各行之间留有空白的容器内
space-around；项目位于各行之前、之间、之后都留有空白的容器内。
align-items 属性定义flex子项容器的当前行的侧轴（纵轴）上的对齐方式。
streth：默认值，项目被拉伸以适应容器
center：项目位于容器的中心
flex-start：项目为于容器的开头
flex-end：项目位于容器的开头
flex-wrap：让弹性盒元素在必要的时候拆行
nowrap：默认值，规定灵活的项目不拆行或不拆列
wrap：规定灵活的项目在必要的时候拆行或拆列
wrap-reverse：规定灵活的项目在必要的时候拆行或者拆列，但是以相反的顺序
initial：设置该属性的为它默认值
herit：从父元素继承该属性
子元素常用属性
*伸缩盒中每一个元素称为一个项目。
flex-grow：number；
一个数字规定项目将相对于其他灵活的项目进行扩展的量。默认值为0.
flex-direction：colum；//垂直分布
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
