作者:故事我忘了￠
个人微信公众号:程序猿的月光宝盒
个人微信公众号:程序猿的月光宝盒
目录
布局原理
flex是flexible box 的缩写,意为"弹性布局",用来为盒子状模型提供最大的灵活性,任何一容器都可以指定flex布局
当父元素是flex布局后, 子元素的float,clear,vertical-align失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素,成为flex容器,简称容器,他的所有子元素自动成为容器成员,成为flex项目,简称项目
子容器可以横向和竖向排列
总结:通过给父元素添加flex布局属性,来控制子盒子的位置和排列方式
父项常见属性
有6个属性
1.flex-direction:设置主轴的方向
主/侧轴:行/列,x/y轴
默认主轴:x往右 ➡
默认侧轴:y向下 ⬇
这个属性会设置主轴的方向(项目的排列方向)
属性值:
2.justify-content:设置主轴上的子元素排列方式
这个属性定义额项目在主轴上的对齐方式
Tips:使用这个属性之前一定要先设置主轴(默认x➡)
3.flex-wrap:设置子元素是否换行
默认情况下,项目都在一条(轴)线上,由flex-wrap属性定义,flex布局中默认是不换行的
4.align-content:设置侧轴上的子元素排列方式(多行)
1.只能用于子项出现换行的情况(多行),在单行下是没有效果的
-
5.align-items:设置侧轴上的子元素排列方式(单行)
1.这个属性控制子项在侧轴(默认⬇)上的排列方式,在子项为单项的时候使用
2.拉伸的时候子元素不能给高度
3.align-content和align-items的区别
1.align-items单行,只有上/下/居中和拉伸
2.align-content多行,可以设置上/下/居中/拉伸以及平均分配剩余空间等
单行找align-items,多行找align-content
6.flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-flow: row wrap;
子项常见属性
1.flex属性
定义子项目分配剩余空间,用flex来表示占多少分数
2.align-self 控制子项自己在侧轴上的排列方式
允许单个项目有与其他不一样的对齐方式,可覆盖align-items属性
默认值为auto,表示继承父元素的align-items.如果没有父元素,等同于stretch(拉伸)
3.order排列顺序
数字越小,排列越前,默认为0
Tips:和z-index不一样