CSS3支持box-flex彈性佈局

時間 2019-11-06
標籤 css3 css 支持 box flex 彈性佈局欄目 CSS 简体版
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。