在Css中,如何水平均分各个元素?使用flex布局简单易懂。
在页面中定义父元素和子元素。其中,我们需要子元素1~子元素6平均分布。HTML代码如下:
1 <div class="box" style=" 100%;background-color: #CCCCCC;"> 2 <div class="item" style="background-color: red">子元素1</div> 3 <div class="item" style="background-color: yellow">子元素2</div> 4 <div class="item" style="background-color: green">子元素3</div> 5 <div class="item" style="background-color: red">子元素4</div> 6 <div class="item" style="background-color:yellow">子元素5</div> 7 <div class="item" style="background-color: green">子元素6</div> 8 </div>
CSS代码,定义样式box和item。
1 .box { 2 display: -webkit-flex; /* Safari */ 3 display: flex; 4 } 5 6 .item { 7 flex: 1; 8 }
显示样式如下: