我对Flexbox布局模式的理解

Flexbox，一种CSS3的构造模式，也叫做弹性盒子模型，用来为盒装模型供给最大年夜的灵活性。起首举一个栗子，之前我们是如许实现一个div盒子程度垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后经由过程margin偏移的方法来实现。

<style> 
 
.container{ 
 
width: 600px; 
 
height: 400px; 
 
border: 1px solid #000; 
 
position: relative; 
 
} 
 
.box{ 
 
width: 200px; 
 
height: 100px; 
 
border: 1px solid #000; 
 
position: absolute; 
 
left: 50%; 
 
top: 50%; 
 
margin-left: -100px; 
 
margin-top:-50px; 
 
} 
 
</style> 
 
<div class="container"> 
 
<div class="box"></div> 
 
</div>

假如应用了flex后，实现起来就Ｒ单了，并且不须要本身去算，也不须要绝对定位，只须要经由过程对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方法为center， align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方法为center，具体如下：

<style> 
 
.container{ 
 
width: 600px; 
 
height: 400px; 
 
border: 1px solid #000; 
 
display: flex; 
 
justify-content:center; 
 
align-items:center; 
 
} 
 
.box{ 
 
width: 200px; //宽度可认为随便率性 
 
height: 100px; //高度可认为随便率性 
 
border: 1px solid #000; 
 
} 
 
</style> 
 
<div class="container"> 
 
<div class="box"></div> 
 
</div>

其实Flexbox的优良特点并不是这一些，起首来一张它的属性图吧~

这张图可以在接下来的属性分析顶用到。

1/4 1 2 3 4 下一页尾页

　　推荐阅读

　　金融大数据行业应用及发展全洞察

在中国经济走向新常态的转型中，在中国经济成为全球第二大年夜经济体的成长中，在中国金融业向支撑实体经济、立异驱动的转换中，大年夜数据在金融范畴的应用，成为中国金融业的新增长点和>>>详细阅读

本文标题：我对Flexbox布局模式的理解

地址：http://www.17bianji.com/lsqh/35393.html

1/2 1