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; /*justify-content: space-between;*/ /*justify-content: space-around;*/ /*justify-content属性决定项目在主轴上的对齐方式*/ align-items: center; /*align-items: flex-start;*/ /*align-items: flex-end;*/ /*font-size: 300px; align-items: baseline;*/ /*baseline即4线格中的第3线*/ /*stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。*/ /*align-items属性决定项目在交叉轴上的对齐方式*/ } section{ border:1px solid blue; text-align: center; font-size: 16px; } section:nth-of-type(1){ flex-basis: 150px; /*height: 200px;*/ } section:nth-of-type(2){ flex-basis: 50px; height: 150px; } section:nth-of-type(3){ flex-basis: 200px; /*height: 50px;*/ /*align-self: flex-end;*/ /*align-self: flex-start;*/ /*align-self: center;*/ /*align-self: baseline;*/ align-self: stretch; /*stretch 指定高度时不起作用 标签自身在交叉轴的对齐方式 即会覆盖掉 父元素指定的algin-items样式*/ } section:nth-of-type(4){ flex-basis: 100px; height: 250px; }
换行对齐
html
<body> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> <section>9</section> <section>10</section> </body>
css
body{ display: flex; margin: 0; height: 100%; flex-wrap: wrap; /*align-content: flex-end;*/ /*align-content: center;*/ align-content: space-around; /*align-content: stretch;*/ /*align-content行间对齐方式 如果不换行则此样式无效果*/ justify-content: center; align-items: center; } section{ width: 150px; /*height: 50px;*/ border:1px solid blue; }
演示:(如打不开,请右键鼠标——在新标签页中打开)
Box垂直居中
推荐阅读: