1.父元素设置
display:flex
2.子元素设置
主要属性
1.flex-direction:设置主轴的方向,,默认row,x轴从左到右
row 默认值从左到右排列
row-reverse 从右到左排列
column 从上到下排列
column-reverse 从下到上排列
2.justify-content:设置主轴上的子元素排列方式,默认flex-start左对齐
flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
flex-end 在尾部开始排列,右对齐
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间。每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍。
space-between 先两边贴边 再平分剩余空间(重要)
3.flex-wrap:设置子元素是否换行,默认nowrap
nowrap 默认值,不换行,如果子元素超过父元素的宽度或高度,每个子元素会自动在主轴方向压缩
wrap 换行
wrap-reverse 换行,第二行在第一行上面,从左到右
4.align-content:设置侧轴上的子元素的排列方式
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch(默认值) 设置子项元素高度平分父元素高度
5.align-items:设置侧轴上的子元素排列方式(单行)
以主轴为x轴为例子
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
baseline 第一行文字的基线对齐
stretch 拉伸(默认值),如果项目未设置高度或为auto,将占满整个容器的高度
子元素不给高度才有效
6.flex-flow :复合属性,flex-direction和flex-wrap的缩写,默认row nowrap
flex-flow属性是flex-direction和flex-wrap属性的复合属性
它是flex-direction 和flex-wrap的简写形式,默认是 row nowrap
语法:
flex-flow:flex-direction|flex-wrap
flex-flow:row wrap;
其它属性
order
定义子元素在主轴方向上的排列顺序
数值越小,在主轴排列越靠前,默认为0
flex-grow
放大比例 默认是0 当有放大空间的时候,值越大,放大的比例越大
flex-shrink
缩小比例 默认是1 进行缩放.
值越大,缩小的时候比例越小
如果父级的空间足够:flex-grow有效,flex-shrink无效。
如果父级的空间不够:flex-shrink 有效,flex-grow无效。
flex-basis
设置该元素的宽度。当然,width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。
flex
flex,子项占的份数:定义子元素分配剩余空间,用flex来表示占多少份数
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
align-self
设置子元素自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
除了auto是表示继承父元素,其他的跟align-items是一样的