flex布局
父元素属性
flex-direction:元素排列方向
row从左到右(默认) row-reverse从右到左 column(从上到下) column-reverse
如果父元素不设置高度,会有子元素的高度把他撑起来
如果给父元素设置了display:flex,并且宽度小于子元素总体宽度的和,自动对子元素进行压缩
如果想让他换行:flex-wrap
flex-wrap:元素换行
nowrap:默认值,不换行、不换列
wrap:换行或换列
wrap-reverse:换行或换列,但以相反的顺序
flex-flow
flex-direction和flex-wrap的简写形式
语法:flex-flow:row wrap (排列方式、换行方式)
justify-content:剩余空间的分布
作用:用来在存在剩余空间时、设置为间距的方式
flex-start:默认值,从左到右,挨着行的开头,所有的空隙都在结尾
flex-end:从左到右,挨着行的结尾,所有的空隙都在开头
center:居中显示,空隙在开头和结尾各一半
space-between:平均分布在该行上,两边不留间隔空间,空隙在子元素与子元素之间
space-around:平均分布在该行上,两边留有一半的间隔空间
align-items:设置每个flex元素在交叉轴上的默认对齐方式
主轴:元素的排列,比如横向排列,主轴就是横轴,纵向排列主轴就是纵轴
交叉轴:主轴为横轴,交叉轴即为纵轴
flex-start:位于容器开头
flex-end:位于容器结尾
center:居中显示
space-between:之间留有空白
space-around:两端都留有空白
align-content
作用类似align-items
区别举例(纵轴为交叉轴)
- 把所有行当做一个整体,整体居中或者靠上靠下,每一行中间没有间距
- 把每一行当做一个单独的,即每一行中间存在间距
子元素属性
flex-basis:设置弹性盒子伸缩基准值(宽度),设置之后width不再生效 flex-basis:50px;
flex-grow:设置弹性盒子的扩展比率(前提:父div宽度有剩余)
总宽度400 第一个div50,第二个div100,剩余250 给两个子div设置flex-grow:1;则代表将剩余的分为两份,各加上1/2,第一个为125+50=175,第二个为125+100=225
flex-shrink:设置弹性盒子的缩小比率,和扩展设置相同。
flex:以上三个的缩写,(顺序)扩大比率 缩小比率 基准值
-
特殊写法
属性 作用 flex:auto flex:1 1 auto flex:none flex:0 0 none