常见父项属性
flex-direction:设置主轴的方向
flex-direction属性值有row(默认值从左到右),row-reverse(从右到左),column(从上到下),column-reverse(从下到上)
justify-content:设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式,我们需要在使用之前确定好主轴是哪个
justify-content属性值有flex-start(默认值从头部开始,如果主轴是X轴,则从左到右),flex-end(从尾部开始排列),center(在主轴居中对齐,如果主轴是X轴则水平居中)
space-around(平分剩余空间),space-between(先两边贴边,再平分剩余空间)
flex-wrap:设置子元素是否换行
flex-wrap属性值nowrap(默认值不换行),wrap(换行)
align-items:设置侧轴上的子元素的排列方式(单行)
该属性是控制子项在侧轴(默认是Y轴)上的排列方式,在子项为单项的时候使用。属性值有flex-start(默认值侧轴从上到下),flex-end(侧轴从下到上),center(挤在一起居中,侧轴垂直居中),stretch(侧轴拉伸)
align-content:设置侧轴上的子元素的排列方式(多行)
该属性设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行!!!),在单行下没有效果
flex-flow:复合属性,相当于同时设置flex-direction和flex-wrap
常见子项属性
flex: 子项目占的份数
flex属性定义子项目分配剩余空间,用flex来表示占多少份。默认为0
align-self: 控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值是auto,表示继承父元素的align-items属性。如果没有父元素,则等同于stretch。
order:定义子项的排列顺序(前后顺序),数值越小,排列越靠前,默认为0。
flex布局兼容性写法
CSS样式
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
1 | .flex {<br> display : -webkit-box;<br> display : -webkit-flex;<br> display : -ms-flexbox;<br> display : flex;<br>}<br><br>.flex-v {<br> -webkit-box-orient: vertical;<br> -webkit-flex- direction : column;<br> -ms-flex- direction : column;<br> flex- direction : column;<br>}<br><br>.flex -1 {<br> -webkit-box-flex: 1 ;<br> -webkit-flex: 1 ;<br> -ms-flex: 1 ;<br> flex: 1 ;<br>}<br><br>.flex-align- center {<br> -webkit-box-align: center ;<br> -webkit-align-items: center ;<br> -ms-flex-align: center ;<br> align-items: center ;<br>}<br><br>.flex-pack- center {<br> -webkit-box-pack: center ;<br> -webkit-justify- content : center ;<br> -ms-flex-pack: center ;<br> justify- content : center ;<br>}<br><br>.flex-pack- justify {<br> -webkit-box-pack: justify ;<br> -webkit-justify- content : space-between;<br> -ms-flex-pack: justify ;<br> justify- content : space-between;<br>}<br> |
横向垂直居中flex写法
.v-center{display:flex;align-items: center;justify-content:center;}