• 当前标签:Box垂直居中

程序开发 Box垂直居中、Flex弹性布局

Box垂直居中: html: <body> <section> <span>垂直水平居中</span> </section> </body> css: section{ display: -moz-box; display: -webkit-box; width:300px; height: 300px; border:1px solid blue; -moz-box-pack: center; /*水平居中 必须写在容器中*/ /*-webkit-box-pack: center;*/ /*-moz-box-align: center;*/ /*垂直居中*/ } span{ display: -moz-box; /*子标签也必须写上此样式*/ -moz-box-align: center; } Flex弹性布局 html: <body> <!--<span>b</span>--> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <!--<span>q</span>--> </body> css: body{ margin: 0; height: 100%; display: flex; /*开启弹性布局*/ /*flex-direction属性决定项目在主轴上的方向*/ /*flex-direction: row-reverse;*/ /*flex-direction: column;*/ /*flex-direction: column-reverse;*/ } section{ /*width:25%; height: 25%;*/ flex-basis: 25%; /*height: 25%;*/ border:1px solid blue; } section:nth-child(1){ order: 4; } section:nth-child(2){ order: 1; } section:nth-child(3){ order: 2; /*order属性定义项目的排列顺序,数值越小越靠前 默认为0*/ } section:nth-child(4){ order: 3; } 分配空间 body{ margin: 0; height: 100%; display: flex; } section{ border: 1px solid blue; } section:nth-child(1){ flex-basis: 150px; /*flex-grow: 2;*/ /*flex-grow 属性定义项目的放大比例 默认是0 即如果存在剩余空间也不放大 flex-grow是将剩余空间划分成所有flex-grow值 的总和和指定分数 然后在将这些分数分配下去 */ flex-shrink: 0; } section:nth-child(2){ flex-basis: 100px; /*flex-grow: 1;*/ flex-shrink:1; } section:nth-child(3){ flex-basis: 500px; /*flex-grow: 1;*/ flex-shrink: 3; /*flex-shrink默认为1 当空间不足时等比例缩放 将flex-shink设置为0将不会收缩 值越大收缩的越厉害*/ } section:nth-child(4){ flex-basis: 400px; /*flex-grow: 1;*/ flex-shrink:1; } 基本对齐 body{ margin: 0; height: 100%; display: flex; justify-content: center;

2017-05-04 23:26:09 58 0 0
阅读详情
  • 1
前往