1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- /* 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;
- }
|