任何一个容器都可以指定为flex布局
当父盒子设为flex布局后,子元素的float、clear、vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex的元素,称为Flex容器(flex container)简称”容器“。
它的所有子元素自动成为容器成员,成为Flex项目(flex item)简称“项目”
启用flex布局:给标签加上样式:display:flex;
1、flex-direction设置主轴方向
flex布局,分为主轴和侧轴方向也称行和列、x轴和y轴
默认主轴方向就是x方向,水平向右
默认侧轴方向就是y方向,水平向下
元素跟着主轴排列
属性值:row:默认,为水平方向,相当于float:left
row-reverse:水平反方向,相当于float:right,即从右到左
column:垂直方向,即从上到下
column-reverse:垂直反方向,即从下到上
2、justify-content 设置主轴上的子元素排列方式
使用该属性之前一定要确定好主轴方向
属性值:flex-start:默认值,从头部开始,如果主轴是x轴,则从左到右;如果主轴是Y轴,则从上到下
flex-end:从尾部开始排列,如果主轴是x轴,则子元素贴着右边,但是顺序不变 ,如果主轴是y轴,子元素就贴着下边
center:在主轴居中对齐(如果主轴是X轴则水平居中)
space-around:平分剩余空间,平分父元素的空间,每个子元素之间的间距一样
space-between:先两边贴边,再平分剩余空间:父元素里面的子元素两边贴着边缘,剩余的子元素平分剩下的空间
3、flex-wrap 设置子元素是否换行
默认情况下,子元素是不换行的,如果父元素一行装不下,会缩小子元素的宽度,放到父元素空间里面。
属性值:nowrap:默认值,不换行
wrap:换行
4、align-items设置侧轴(默认侧轴为y轴)上的子元素排列方式(单行)
设置子项在侧轴上的排列顺序,用于子元素是单行的情况下,即子元素不换行
属性值:flex-start:默认值,从侧轴的头部开始排列
flex-end:从侧轴的尾部开始排列
center:在侧轴中垂直居中显示
stretch:拉伸:如果子元素设置高度,设置stretch就没有变化,只有当子元素没有设置高度或者高度等于auto时,子元素的高度会被拉伸到和父元素一样高
baseline:各个Flex Item相对于基线对齐。
A .若Flex Item内部没有任何文本内容,则Flex Item在Flex Container的顶端 且各个Flex Item之间底部对齐。 B .若Flex Item内部具备文本内容,则各个Flex Item相对于文本基线对齐
5、align-content 设置侧轴上的子元素的排列顺序(多行)
设置子项在侧轴上的排列顺序,只能用于多行的情况下,即子元素换行,在单行情况下没有效果
属性值:flex-start:默认值,从侧轴的头部开始排列
flex-end:从侧轴的尾部开始排列
center:在侧轴中垂直居中显示
space-around:子项在侧轴平分剩余空间
space-between:子项在侧轴先分布在两头,再平分剩余空间
stretch:设置子项元素高度平分父元素高度,跟单行效果差不多。如果子元素设置高度,设置stretch就没有变化,只有当子元素没有设置高度或者高度等于auto时,子元素才会平分父元素的高度
*****注意align-items和align-content的区别
flex-flow属性是flex-direction和flex-wrap属性的复合属性,相当于flex-direction和flex-wrap的简写
例如:flex-flow:row wrap;
1、flex属性
定义子项目分配剩余空间,用flex来表示占多少份数
flex: <number>; // flex 的值是数字
flex:1;
2、align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性
例如:align-self:flex-end;
3、order属性定义子项的排序顺序(前后顺序)
数值越小,排列越靠前,默认值为0
例如order: -1;
联系客服