CSS3支持box-flex弹性布局

最新推荐文章于 2025-07-07 14:25:26 发布

转载最新推荐文章于 2025-07-07 14:25:26 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/p/6070496.html

本文深入探讨了CSS3中的Flexbox布局模型，包括display属性的新值和8个新属性的详细解释。通过实例展示了如何使用Flexbox实现元素的水平和垂直居中，以及其在响应式设计中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>CSS3支持box-flex弹性布局</h1>
    <p>
    Flexbox 为 display 属性赋予了一个新的值（即 box 值），还为我们提供了 8 个新的属性：
        box-orient
        box-pack
        box-align
        box-flex
        box-flex-group
        box-ordinal-group
        box-direction
        box-lines
    </p>
    display:box;将此元素及直系子代加入弹性框模型。FlexBox只适用于直系子代
box-orient值：horizontal | vertical | inherit
框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。
box-pack值：start | end | center | justify
设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。
box-align值：start | end | center | baseline | stretch
基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。


box-flex

<pre>
1.如果想水平排列，且要求多列无论内容多少，高度一致。过去用float以及overflow:hidden;
现在用Flexbox解决。
</pre>
<div id="flexbox">
  <p>child 1</p>
  <p>child 2</p>
  <p>child 3</p>
</div>
<h5>该元素只有在框的轴向上是具有弹性的；在本例中，也就是在水平方向上具有弹性。</h5>
<style>
#flexbox{
    /**告知父元素进行Flexbox模型，并水平排列**/
    display:-webkit-box;-webkit-box-orient:horizontal;
    width:400px;heigth:200px;background:green;
}
#flexbox p{background:#ff7300;}
#flexbox p:nth-child(2){background:#a7f513;}
#flexbox p:nth-child(3){background:blue;}
#flexbox > p{
  height:200px;
  -webkit-box-flex: 1;/*弹性布局。。默认非弹性，故设置*/
}
</style>
<script>
var elem=document.querySelector('#flexbox');
var elemP=document.querySelectorAll('#flexbox>p');
elem.onmouseover=function(){
    elemP.forEach(function(elem,ind,arr){
        elem.style.cssText="-webkit-box-flex:"+(ind+1)*2+";";
    })
}
elem.onmouseleave=function(){
    elemP.forEach(function(elem,ind,arr){
        elem.style.cssText="-webkit-box-flex:1;";
    })
}
</script>


<pre>
垂直居中的解决方案
</pre>
<div class="op">
    <div class="main">222</div>
</div>
<style>
.op{width:300px;height:300px;background:#1e52ec;position:relative;}
.main {
  position: absolute; width: 100px;height: 100px;background:#ff7300;
  top: calc(50% - 50px);left: calc(50% - 50px);
}
</style>
问题：
    我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。
        如果需要居中的元素已经在高度上超过了视口，那么它的顶部会被视口裁剪掉。有一些办法可以绕过这个问题，但hack味道过浓。
    在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。
        这个问题可以用 transform-style: preserve-3d 来修复，不过这个修复手段也可以认为是一个hack，而且很难保证它在未来不会出问题。


        
<pre>
Flexbox（伸缩盒）解决水平、垂直居中
</pre>

<div class="op22">
    <div class="main22">Flexbox（伸缩盒）解决水平、垂直居中</div>
</div>
<style>
.op22{
    width:300px;height:300px;background:#1e52ec;
    display:-webkit-flex;/**new **/
}
.main22 {
  width: 100px;height: 100px;background:#ff7300;
  margin:auto;
}
</style>
<pre>
请注意，当我们使用Flexbox时，margin: auto不仅在水平方向上将元素居中，垂直方向上也是如此。
    还有一点，我们甚至不需要指定任何宽度（当然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 max-content。
</pre>    
    
    
Flexbo 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。    

main26固定大小，然后借助Flexbox 规范引入的align-items和justify-content属性，
可以让它内部的文本也实现居中（我们可以对body使用相同的属性来使main26元素居中，但margin: auto方法要更加优雅一些，并且同时起到了回退的作用）。

<div class="main26">
    文字内容居中
</div>
<style>
.main26 {
  background:#ff7300; width: 300px;height:300px;
  display: flex;align-items: center;justify-content: center;
}
</style>
</body>
</html>