文章目录
弹性盒(flex)
css中的一种布局手段,主要用来代替浮动来完成页面的布局,能够使得元素具有弹性,让元素跟随页面的大小改变而改变。
弹性容器:使用弹性盒必须将一个元素先设置为弹性容器
- display:flex,设为块级弹性容器
- display:inline-flex,设为行内弹性容器
弹性元素:弹性容器的子元素是弹性元素。
-
flex-direction:弹性容器的排列方式
– row:默认值,弹性元素水平从左向右排列
– row-reverse:反向水平排列,从右向左排列
– colum:弹性元素纵向从上向下排列
– colum-reverse:弹性元素反向纵向自下向上排列 -
flex-grow:弹性元素的伸展系数
-
flex-shrink:弹性元素的收缩系数
-
flex-wrap:弹性元素在弹性容器中自动换行
– nowrap:默认值,不会换行
– wrap:元素沿着辅轴方向自动换行
– wrap-reverse:元素沿辅轴反方向自动换行 -
justify-content:如何分配主轴上空白区间
– flex-start:沿着主轴开始边排列
– flex-end:沿着主轴终点边排列
– center:元素居中排列
– space-around:空白分布到元素两侧
– space-evenly:空白分不到元素的单侧
– space-between:空白均匀分不到元素之间 -
align-item:元素在辅轴上的对齐方式
– stretch:默认值,将元素的长度设置为相同的值
– flex-start:元素不会拉伸,沿着辅轴起边对齐
– flex-end:元素不会拉伸,沿着辅轴终边对齐
– center:居中对齐
– baseline:基线对齐 -
align-content:辅轴空白部分的分布,可选值与justify-content相同
-
flex-basis:元素在主轴上的基础长度。如果主轴是横向的,则指定的是宽度;若主轴是纵向的,则指定的是高度。