頁面常見佈局以及實現方法--flex

時間 2019-11-11

標籤頁面常見佈局以及實現方法 flex 欄目 Flex 简体版

原文原文鏈接

頁面佈局是前端工程師的基本功之一，總結分析各類佈局實現方法，可讓本身快速定位哪一種方法實現功能，同時能夠作到現最大程度的兼容。javascript

1、水平居中css

假設：最基本機構 .parent>.childhtml

一、行內元素、文本元素、行內塊元素前端

.parent{
    text-align: center;
}

說明：只對行內元素有效；屬性會繼承影響到後代行內元素；java

二、單個塊級元素ios

#child{
    width: 200px; /*必須定寬*/
    margin: 0 auto;
}

說明：child必須定寬，而且值不能爲auto；寬度要小於父元素，不然無效.web

三、多個塊級元素bootstrap

.parent{
    text-align: center;
}
.child{
    display: inline-block; 
}

說明：只對行內內容有效；屬性會繼承影響到後代行內內容；　　瀏覽器

四、定位+transform/定位+margin前端工程師

#parent{
    height: 200px;
    width: 200px;  
    position: relative; 
}
#son{
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    /*margin-left: -50px;*/
    width: 100px;  
    height: 100px;
}

說明：　主要是transform兼容性很差，須要加上各類瀏覽器內核前綴；

五、flex佈局

.parent{
    display: flex;
    justify-content: center;
}

說明：flex兼容性問題，比較合適用於移動端開發。

2、垂直居中

假設：最基本機構 .parent>.child

一、行內元素、文本元素、行內塊元素

.parent{
    height: 100px;
    line-height: 100px;
}

說明：比較試用單行的內容

二、多行文本

.parent{
    height: 100px;
    line-height: 50px;
}

三、table-cell(單個塊級元素)

.parent{
    display: table-cell;
    vertical-align: middle;
}

四、定位+transform/定位+margin

和上面水平定位差很少，只是換了一個軸；　

五、flex佈局

parent{
    display: flex;
    align-items: center;
}

或

.parent{
    display: flex;
}
.child{
    align-self: center;
}

說明：仍是兼容性的缺點　

3、水平垂直居中

<div class='parent'>
    <div class=''child></div> 
</div>

一、定位

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
}

二、定位+transform

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:50%;
   right:50%;
   transform:translate(-50%,-50%);
}

三、text-align+height +line-height

.parent{
  text-align:center;
  height: 100px; 
}
.child{
  line-height: 100px;
}

四、table-cell

.parent{
    display: table-cell;
    vertical-align: middle;
}
.child{
    margin:auto;
}

4、單獨講講flex佈局

　　其實flex佈局已經不是什麼新鮮的事物了，早在2009年，W3C就提出了一種新方案，可是因爲各類瀏覽器兼容性的問題，這種方案一直沒有推廣開來。記得很在早前就有使用過一個叫swiper的移動端插件，看了其中的源代碼，發現它裏面就使用了flex佈局，草草看了一下，也知道大概意思，可是以後的項目一直沒有機會使用，我也就沒有再關注過。前端時間去看看這種方案的兼容性，95%以上已經完美支持這種解決方案了。so。。。能夠大膽的使用了。（有點坑的就是，IE10如下不支持，ios沒問題，手機安卓4.3如下也不支持）

flex佈局也叫彈性佈局，相比傳統的佈局以及bootstrap的柵格佈局，flex佈局顯得更加的靈活，代碼寫起來也更加的優雅。

　任何一個容器均可以經過設置 display 爲 flex/inline-flex 將其指定爲Flex佈局。對於設置了Flex佈局的容器，子元素的 float、clear、vertical-align 屬性將失效；可是，若是對這些子元素設置 position 定位，那麼Flex屬性的做用會失效。即按權重來講：position > flex > flot/clear/vertival-align;

直接插入主題，怎麼使用flex使元素居中？

首先先明確基本概念：任何的容器均可以指定flex佈局，容器裏面的子元素自動成爲容器的成員，也叫項目，flex item

.parent{
    display: flex;
    display: -webkit-flex; 
    justify-content:center;
    align-items:center;
}

簡單幾行，就可使子元素徹底居中於父元素中了。。。

接下來，再看看flex佈局的其餘使用狀況。

咱們能夠把彈性佈局想成一個能夠朝四個方向拉伸的盒子。

容器元素有六個屬性，分別是：

flex-direction

決定項目元素的排列方向,通常有四個值

row（默認值，主軸爲水平方向，起點是左端，其餘見名知意） | row-reverse | column | column-reverse;

flex-wrap

決定項目元素都在一條線上，通常有三個取值

nowrap（默認值，不換行） | wrap | wrap-reverse;

flex-flow

flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

justify-content

定義了項目在主軸上的對齊方式。

flex-start （默認值）：左對齊| flex-end | center | space-between | space-around;

align-items

定義項目在交叉軸上如何對齊。

align-content

定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

拿來看個例子吧，若是ui給你這樣的的設計稿，你怎麼出來？

這樣怎麼排版？用什麼辦法？定位？？？其實咱們能夠嘗試用flex的解決方案。看看效果，這麼沒有百分之百去還原，作了大概。

實現思路，給父元素加上下面的屬性（已經最大程度考慮了瀏覽器的兼容性），而後給元素加上margin值就能達到上面的效果了。

.flex{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
/*居中對齊*/
	.flex-justify-center{
	-webkit-box-pack:center;
	-moz-justify-content:center;
	-webkit-justify-content:center;
	justify-content: center;
}

/*上下居中*/
.flex-align{
	-webkit-box-align:center;
	-moz-align-items:center;
	-webkit-align-items:center;
	align-items:center;
}

5、經典佈局--兩列布局　

需求：左邊寬度固定，右邊寬度自適應

一、flex

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    width：100px;
}
.right{
    background-color: red;
    height: 200px;
    flex:1;     
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

二、float+margin　

<style>
    div {
        height: 200px;
    }
    .left {
        float: left;
        width: 100px;
        background-color: rebeccapurple;
    }
    .right {
        margin-left: 100px;
　　　　 //直接用overflow：hidden觸發BFC模式　　
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

三、table

<style>
    .parent{
        width: 100%;
        display: table;
        height: 500px;
     }
     .left,.right{
        display:table-cell;
     }
    .left {
        width: 100px;
        background-color: rebeccapurple;
    }
    .right {
        background-color: red;
    }
</style>
<body>
    <div class="parent">
         <div class="left"></div>
         <div class="right"></div>
    </div> 
</body>

說明：利用單元格自動分配寬度　　

四、利用絕對定位

.parent{
    position: relative;  /*子絕父相*/
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
}
.right {
    position: absolute;
    top: 0;
    left: 100px; 
    right: 0;
    height: 500px;
}

五、float+overflow

.left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
.right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden;
}

<div id="left">左列定寬</div>
<div id="right">右列自適應</div>

六、Grid柵格佈局

.parent {
    width: 100%;
    height: 500px;
    display: grid; //聲明
    grid-template-columns: 100px auto; 
}
.left {
    background-color: red;
}
.right {
    background-color: green;
}

說明：支持還不太好

MDN: CSS Grid Layout

6、總結

　　對於這類的學習，平時用到的時候，再去查對應的屬性應用就能夠了，更重要的是在學習一項新的東西以後，慢慢加入本身的體會，沒在實踐中去總結。　

建議若是需求不太考慮低版本的兼容問題，能夠大膽的使用flex和grid等方法，真的好用~。