码迷,mamicode.com
首页 > 其他好文 > 详细

flex伸缩布局

时间:2019-09-22 01:14:29      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:不能   enter   flex   伸缩布局   play   水平   ems   start   sel   

一.在父盒子上设置样式

1.display:flex;让盒子变成一个伸缩盒子

2.flex-direction  控制主轴方向

flex-direction:row 水平往右;

flex-direction:column  垂直往右;

3.justify-content  主轴对齐方式

justify-content:flex-start ;往主轴开始位置对齐

justify-content:flex-end ;往主轴结束位置对齐

justify-content:center ;居中对齐

justify-content:space-between;让盒子在主轴方向平均分布

justify-content:space-around;让盒子在主轴方向平均分布,两端不留空隙

4.align-items 侧轴单行对齐方式

align-items:flex-start;往侧轴开始位置对齐

align-items:flex-end;往侧轴结束位置对齐

align-items:center;往侧轴方向垂直对齐

align-items:stretch;往侧轴方向拉伸,盒子不能设置高度

5.flex-wrap    控制盒子换行

6.align-content 侧轴多行对齐方式

align-content:flex-start ;  往侧轴开始位置对齐

align-content:flex-end;往侧轴结束位置对齐

align-content:center;往侧轴方向垂直对齐

align-content:space-between;让盒子在侧轴方向平均分布

align-content:space-around;让盒子在侧轴方向平均分布,两端不留空隙

align-content:stretch;往侧轴方向拉伸,盒子不能设置高度

 二.在子元素设置样式

1.flex 可以分数分配主轴的剩余空间,在排布完设置了宽高的盒子之后,再分配空间

2.order:控制子元素的排布顺序,数值越小,越靠前。

3.align-self 控制自己在侧轴的对齐方式

align-self::flex-start;;往侧轴开始位置对齐

align-self:flex-end;往侧轴结束位置对齐

align-self::center;往侧轴方向垂直对齐

align-self::stretch;往侧轴方向拉伸,盒子不能设置高度

 

flex伸缩布局

标签:不能   enter   flex   伸缩布局   play   水平   ems   start   sel   

原文地址:https://www.cnblogs.com/zhaodz/p/11565342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!