css flex经典三大布局：垂直居中，两列等高，自适应宽 |
您所在的位置：网站首页 › css一行两列两边自适应 › css flex经典三大布局：垂直居中，两列等高，自适应宽 |
|
用flex实现css里的三大经典布局，不需要额外很多代码。 1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。 #parent { /* align-content和align-items必须配合使用 */ display: flex; justify-content: center; align-content: center; align-items: center; width: 300px; height: 300px; outline: solid 1px; } #child { width: 100px; height: 100px; outline: solid 1px; }2，二列等高：父元素里有二个子元素，一个设置高度，另一个需要和它高度一致。 #parent { display: flex; justify-content: center; align-content: center; /* stretch让盒子内的每个元素的高度都等于行高 */ align-items: stretch; width: 300px; } #child { width: 100px; outline: solid 1px; } 3，自适应宽：父元素里有二个子元素，一个设置宽度，另外一个占据剩余的宽度。 #parent { display: flex; width: 300px; height: 200px; background-color: pink; } #child1 { flex: 1; /* 即使设置100px宽，还是会占据剩余的所有宽度 */ width: 100px; background-color: lightblue; } #child2 { width: 100px; outline: solid 1px; }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |