开发过程中,很多布局,用antd的栅格还是不灵活,flex弹性布局会更好用
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
容器属性
- flex-direction 排列方向
- flex-wrap 排不下,如何换行
- flex-flow 1和2的简写
- justify-content 主轴对齐
- align-item 交叉轴对齐
- align-content 多轴线对齐
项目属性
扫描二维码关注公众号,回复:
7665677 查看本文章
- order 数值越小,越靠前
- flex-grow 项目放大
- flex-shrink 项目缩小
- flex-basis 定宽或定高(同事说他面试都会问一个问题,两列,一列定宽,但是不能用width定义,另一列自适应,怎么写,就用这个属性)
- flex 2/3/4的简写
- align-self 单个项目与其他项目不一样的排列方式,下次写代码可以试试这个
以下为拿来即用公用flex类
.display_none { display: none !important; } .visibility_hidden { visibility: hidden; }
/* 交叉轴左对齐 */ .flex_top { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; }
/* 水平居中 */ .center { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; }
/* 垂直居中 */ .col_middle { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; } /* 主轴垂直水平居中 */ .col_center_middle { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; align-items: center; } /* 主轴水平垂直居中 */ .center_middle { display: -webkit-flex; display: -ms-flexbox; display: flex !important; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } .space_between { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } .space_around { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; } .right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end !important; -ms-justify-content: flex-end !important; justify-content: flex-end !important; } .cursor_pointer { cursor: pointer; } .common_shadow { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07); } .str_ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .str_ellpsis_2, .str_ellpsis_3 { display: -webkit-box; -webkit-box-orient: vertical!important; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; } .str_ellpsis_2 { -webkit-line-clamp: 2; /*显示行数*/ } .str_ellpsis_3 { -webkit-line-clamp: 3; /*显示行数*/ } .middle { display: -webkit-flex; display: -ms-flexbox; display: flex!important; -webkit-align-items: center; -ms-align-items: center; align-items: center; }
阮一峰 Flex 布局教程:语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool