HTML前端常用--弹性盒布局flex
flex类型的盒模型简要介绍
CSS3为display提供了一个flex属性值,通过该属性值可以更好的实现多栏布局,将display设为flex即可实现弹性盒子布局。
弹性盒布局是CSS3新增的功能,在早期该属性值曾用过box和inline-box,目前最新的属性值直接使用flex和inline-flex,其中inline-flex就是inline类型的flex,使用较少。
弹性盒模型的配套属性
flex-flow:用于控制容器内子元素的排列方向和换行方式。该属性是一个复合属性,有flex-direction和flex-wrap组成。
flex-direction:指定弹性盒内子元素的换行方式。
flex-wrap:指定弹性盒内子元素的换行方式。
order:该属性作用于盒内子元素,指定子元素排列顺序。
flex:作用于盒内子元素,控制子元素缩放比例。复合属性,由flex-grow、flex-shrink、flex-basis三个子属性组成。
align-items:用于控制弹性盒所有子元素 在排列方向的垂直方向上的对齐方式。
align-self:作用于弹性盒内的子元素,用于控制该子元素在自身在排列方向的垂直方向上的对齐方式。
justify-content:该属性作用于盒内子元素,用于控制该子元素自身在排列方向上的分布方式。
align-content:该属性作用于弹性盒,用于控制弹性盒内行的分布方式。