display的flex屬性使用詳解

時間 2019-11-19

標籤 display flex 屬性使用詳解欄目 CSS 简体版

原文原文鏈接

flex的兼容性在pc端還算闊以，可是在移動端，那就呵呵了。今天咱們只是學習學習，忽略一些不重要的東西。html

首先flex的使用須要有一個父容器，父容器中有幾個items.瀏覽器

父容器：containersass

屬性：學習

　　 display:flex;/*flex塊級，inline-flex:行內快*/flex

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/spa

　　 align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space-around*/　　htm

　　 flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/blog

　　 flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/it

/*flex-flow是flex-direction、flex-wrap的縮寫*/io

這裏給出一個簡單的demo:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <style>
	.container{
	   width:600px;
	   height:400px;
	   border:1px solid #000;
	   display:flex;/*flex塊級，inline-flex:行內快*/
	   justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/
	   align-items:stretch;/*center:垂直居中、flex-start,至頂，flex-end:至底*,space-between、space-around*/
	   flex-direction: row;/*column從上向下的排列，column-reverse,,,,row:從左到右，row-reverse:從右向左*/
	   flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/
	   /*flex-flow是flex-direction、flex-wrap的縮寫*/
	}
	.box{
	　　width:200px;
	 　 height:100px;
	    border:1px solid #000;
	 }
   </style>
 </head>
 <body>
     <div class="container">
　　　　   <div class="box">這是中間的box1</div>
        　<div class="box">這是中間的box2</div>
　　　</div>
 </body>
</html>

子元素的屬性：　

order：設置元素的順序

例如：我麼想要將原本第二個元素排在第一，將排在第一的元素設置爲第二。

咱們能夠設置他們的order值。

.box1{order:1;}
.box2{order:0;}

   <div class="container">
	<div class="box box1">這是中間的box1</div>
	<div class="box box2">這是中間的box2</div>
 </div>

flex:指定可伸縮長度的部件，是flex-shrink,flex-grow,flex-basis這三個屬性的縮寫。

他能夠指定一個子元素的佔據父元素的寬度或者高度的比例。（前提是在子元素尚未佔滿父級元素的狀況下）

demo:

 <style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:200px;
		height:200px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	} 
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
		<div class="box box3">3</div>
		<div class="box box4">4</div>
	</div>
 </body>

最終效果以下：由於子元素佔滿父級元素。

進一步驗證：

<style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:200px;
		height:200px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	} 
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
	</div>
 </body>

　很明顯的闊以看到，box1佔據了600px寬度

align-self:用來單獨設置子元素的對齊方式（可將默認的對齊方式進行覆蓋）

例如:咱們已經在父元素中設置了align-items:center.(將子元素設置爲垂直居中顯示)

這個時候咱們想單獨更改某個子元素的對齊方式，就能夠使用align-self

 <style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:100px;
		height:100px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	}
/* .box4{
		align-self:flex-end;
	} */
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
        <div class="box box3">3</div>
		<div class="box box4">4</div>
	</div>
 </body>

假如咱們設置 box4：align-self:flex-end;呢？？？？？