flex布局
一、flex布局父亲常见属性:
1、flex-direction:设置主轴方向
1、主轴和侧轴:
默认主轴为x轴,侧轴为有轴,
(1)、默认为:row(从左到右)
(2)、方向x轴:row-reverse(从右到左)
(3)、把主轴变成y轴,那么x轴为侧轴:column(从上到下)
(4)、把主轴变成y轴,那么x轴为侧轴:column-reverse(从下到上)
2、justify-content:设置主轴上的子元素的排列方式
设置这个属性的时候一定要确认好主轴到底是哪个!!!
(1)、flex-start:默认值,从头部开始,如果主轴是x轴,则从左到右
(2)、flex-end:从尾部开始排列
(3)、center:在主轴居中对齐(如果主轴为x轴则水平居中)
(4)、space-around :平均剩余空间
(5)、space-between:先两边贴边,在平分剩余空间(重要)
3、flex-wrap:设置子元素是否换行
在felx里面我们盒子变多了,felx会把子元素都在一行显示,我们就会把父盒子变大。
在felx布局中,我们是默认不换行的!!!
(1)、nowrap:不换行(默认)
(2)、wrap:换行
4、align-content:设置侧轴上子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下没有效果。
(1)、flex-start:默认值在侧轴的头部开始排列
(2)、flex-end:在侧轴的尾部开始排列
(3)、center:在侧轴中间显示
(4)、space-around:子项在侧轴平分剩余空间
(5)、space-between:子项在侧轴先分布在两头,在平分剩余空间
(6)、stretch:设置子项元素高度平分父元素高度
5、align-items:设置侧轴上子元素的排列方式(单行)
这个属性我们一点要先确认好侧轴!!!
(1)、flex-start:默认值 从上到下
(2)、flex-end:从下到上
(3)、center:挤在一起居中(垂直居中)
(4)、stretch:拉伸(主要设置这个属性是我们的盒子不要设置高度,不然看不出效果)
6、flex-folw:符合属性,相当于同时设置了flex-direction和flex-wrap
row wrap;
就是同时设置了flex-direction和flex-wrap!!!属性自己上去上面看!!!
二、子项常见属性
使用方法:
左右2侧固定,中间自适应。
平居分为3等分
1、align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
控制某一个子项:
2、order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0.
注意:和z-index不一样。