flex伸缩盒

flex伸缩盒

1.概念
1.概念:Flex 布局，可以简便、完整、响应式地实现各种页面布局
只要容器设置了display：flex属性 就拥有了一个弹性盒布局 多用于移动端布局
2.属性
1.flex-direction属性
更改主轴排列方向 默认是row
取值：row(默认) | row-reverse | column | column-reverse
row-reverse同为横向排列，但项目顺序为倒序3-2-1。
2.flex-wrap属性
弹性元素换行
取值：nowrap(默认) | wrap | wrap-reverse
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部
3.flex-flow: row nowrap;
flex-flow是flex-direction和flex-wrap的缩写
4.justify-content属性
主轴对齐方式
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍 。
space-evenly为项目之间间距与项目与容器间距相等。
5.align-items属性
交叉轴对齐方式
取值：flex-start | flex-end | center | baseline | stretch(默认)
stretch平铺 前提弹性元素高度不设置/auto
flex-start顶部 center中部 flex-end底部
baseline让项目以第一行文字的基线为参照进行排列
6.align-content属性
多行对齐
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
7.order属性
控制元素排列顺序 值越小越靠前
order默认是0
8.flex-grow属性
占据剩余空间
取值:默认是0
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。
假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。
假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。
9.flex-shrink
剩余空间不足是否等比例压缩
取值：0 1(默认)
10.flex-basis
设置弹性元素宽度 优先级比width高
取值：默认auto
11.flex
flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写,用于定义项目放大，缩小与宽度。
取值：默认0 1 auto
12.align-self
设置弹性元素自身交叉轴的对齐方式
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch
各值的表现与父容器的align-items属性完全一致。