弹性布局
display:flex;
不写宽度靠内容撑起来,不写高度,自动扩展最大100%
弹性布局属性
-
flex-decoration:xxx; 决定主轴(项目排列)的方向
:row 从左至右水平排列 :row-reverse 从右至左水平排列 :column 从上至下垂直排列 :column-reverse 从下至上垂直排列
-
justify-content:xxx;定义了项目在主轴上的对齐方式
:flex-start //左对齐
:flex-end //右对齐
:center //居中
:space-between //两端对齐,项目之间间隔相等
:space-around //每个项目两侧的间隔相等,所以项目之间的
间隔比项目与边框的间隔大一倍
- align-items:xxx;项目在交叉轴(y轴)上的对齐方式
:flex-start //上对齐
:flex-end //下对齐
:center //居中
:baseline //文本基线对齐
:stretch //充满,效果不明显
- flex-wrap:xxx;换行 【有D必有E】
:nowrap //不换行
:wrap //换行,第一行在上方
:wrap-reverse //换行,第一行在下方
- align-content:xxx;多根轴线的对齐方式
:flex-start //与交叉轴起点对齐
:flex-end //与交叉轴终点对齐
:center //与交叉轴中点对齐
:space-between //与交叉轴两端对齐,间隔均匀分布
:space-around //轴线两侧的间隔相等,所以轴线之间的
间隔>轴线与边框的间隔
:stretch //占满,默认
- align-self:xxx;单个项目不同的排列方式(加给子元素)
:auto
:flex-start
:flex-end
:center
:baseline
:stretch
- order 定义项目属性的排列顺序 数值越小,排列越靠前,默认为0,(加在子元素上)
{order:<num>;} //(可写负值)
- flex-grow:xxx;项目的放大比例,分配剩余空间,默认为0
flex-grow:<number>; //不能写负值
- flex-shrink:xxx;项目的缩小比例,默认为1
flex-shrink:<number>; //不能写负值
- flex-basis:xxx;在分配多余空间之前,项目占据的主轴空间(main size)是否有多余空间,它的默认值为auto,即项目的本来大小
flex-basis:<length> | auto; //可以设为跟width/height等性质相符的属性的值,项目将占据固定空间
- flex简写
flex-grow、flex-shrink和flex-basis的简写默认值为 0 1 auto ;
flex:auto(1 1 auto)
none(0 0 auto)
flex:1; //新语法
文中如有不妥之处,欢迎大家留言指正,非常感谢
☀我走得很慢,但我从不后退。加油,奥里给!☀