/* felx布局 */ .flex{ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ } /*伸缩流方向*/ .flex_column{ -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /*主轴对齐*/ .justify_center{ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify_end{ -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify_between{ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } /*侧轴对齐*/ .align_start{ -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align_end{ -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align_center{ -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align_baseline{ -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } /*伸缩性*/ .flex_auto{ -webkit-box-flex: 1; -ms-flex: auto; -webkit-flex: auto; flex: auto; } .flex_1{ -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }