flex布局基礎的屬性有哪些？

本文轉載自查看原文 2020-06-05 11:20 897 css

一、flex-容器屬性

1、首先決定是flex主軸方向：flex-direction

row 水平向右（默認）
row-reverse 水平向左
column 垂直向下
column-rrverse 水平向右

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   #dad {
      position: relative;
      display: flex;
      height: 100px;
   }

   #son-1 {
      width: 120px;
      background: blue;
   }

   #son-2 {
      width: 80px;
      background: green;
   }

   #son-3 {
      width: 100px;
      background: yellow;
   }
</style>
<script>
   function handleClick(flexDirection) {
      document.getElementById('dad').style.flexDirection = flexDirection;
   }
</script>

<body>
   <div>決定主軸的方向：flex-direction</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('row')">row</button>
   <button onclick="handleClick('row-reverse')">row-reverse</button>
   <button onclick="handleClick('column')">column</button>
   <button onclick="handleClick('column-reverse')">column-reverse</button>
</body>

</html>

View Code

2、設置父容器屬性，決定子容器主軸排列方式（水平方向）：justify-content

flex-start 左對齊（默認）
flex-end 右對齊
center 居中對齊
space-around 均勻分布，
space-between 均勻分布，收尾子容器緊鄰父容器

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   #dad {
      position: relative;
      display: flex;
      height: 100px;
      display: flex;
   }

   #son-1 {
      width: 120px;
      background: blue;
   }

   #son-2 {
      width: 80px;
      background: green;
   }

   #son-3 {
      width: 100px;
      background: yellow;
   }
</style>
<script>
   function handleClick(justifyContent) {
      document.getElementById('dad').style.justifyContent = justifyContent;
   }
</script>

<body>
   <div>
      設置子容器排列，主軸排列 justify-content
   </div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('flex-start')">flex-start</button>
   <button onclick="handleClick('flex-end')">flex-end</button>
   <button onclick="handleClick('center')">center</button>
   <button onclick="handleClick('space-around')">space-around</button>
   <button onclick="handleClick('space-between')">space-between</button>
</body>

</html>

View Code

3、設置父容器屬性，決定子容器的交叉軸排列方式（垂直方向）：align-items

flex-start 頂部對齊（默認）
flex-end 底部對齊
center 居中對齊
baseline 基准線對齊
stretch 拉伸對齊

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   #dad {
      position: relative;
      display: flex;
      height: 150px;
   }

   #son-1 {
      width: 120px;
      height: 120px;
      background: blue;
   }

   #son-2 {
      width: 80px;
      height: 80px;
      background: green;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
   }
</style>
<script>
   function handleClick(alignItems) {
      document.getElementById('dad').style.alignItems = alignItems;
   }
</script>

<body>
   <div>設置子容器排列，交叉軸排列 align-items</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('flex-start')">flex-start</button>
   <button onclick="handleClick('flex-end')">flex-end</button>
   <button onclick="handleClick('center')">center</button>
   <button onclick="handleClick('baseline')">baseline</button>
   <button onclick="handleClick('stretch')">stretch</button>
</body>

</html>

View Code

4、設置子容器交叉軸排列，和父容器align-items完全一致：align-self

flex-start 頂部對齊（默認）
flex-end 底部對齊
center 居中對齊
baseline 基准線對齊
stretch 拉伸對齊

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   #dad {
      position: relative;
      display: flex;
      height: 150px;
      align-items: center;
   }

   #son-1 {
      width: 120px;
      height: 120px;
      background: blue;
   }

   #son-2 {
      width: 80px;
      height: 80px;
      background: green;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
   }
</style>
<script>
   function handleClick(alignSelf) {
      document.getElementById('son-1').style.alignSelf = alignSelf;
   }
</script>

<body>
   <div>決定子容器交叉軸方向：align-self</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('flex-start')">flex-start</button>
   <button onclick="handleClick('flex-end')">flex-end</button>
   <button onclick="handleClick('center')">center</button>
   <button onclick="handleClick('baseline')">baseline</button>
   <button onclick="handleClick('stretch')">stretch</button>
</body>

</html>

View Code

二、flex-參數屬性

1、order：默認0，用於決定項目排列順序，數值越小，項目排列越靠前。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #dad {
      position: relative;
      display: flex;
      height: 150px;
   }

   #son-1 {
      width: 120px;
      height: 120px;
      background: blue;
      order: 0;
   }

   #son-2 {
      width: 80px;
      height: 80px;
      background: green;
      order: 0;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
      order:0;
   }
  </style>
  <script>
   function handleClick(cls) {
      const order = document.getElementById(cls).style.order;
      document.getElementById(cls).style.order = Number(order) + 1;
   }
</script>
</head>
<body>
   <div>決定項目排列順序：order</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('son-1')">w-120 ++</button>
   <button onclick="handleClick('son-2')">w-80 ++</button>
   <button onclick="handleClick('son-3')">w-100 ++</button>
</body>
</html>

View Code

2、flex-grow：默認0，用於決定項目在有剩余空間的情況下是否放大，默認不放大；注意，即便設置了固定寬度，也會放大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #dad {
      position: relative;
      display: flex;
      height: 150px;
   }

   #son-1 {
      width: 120px;
      height: 120px;
      background: blue;
      flex-grow: 0;
   }

   #son-2 {
      width: 80px;
      height: 80px;
      background: green;
      flex-grow: 0;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
      flex-grow: 0;
   }
  </style>
  <script>
   function handleClick(cls) {
      const flexGrow = document.getElementById(cls).style.flexGrow;
      document.getElementById(cls).style.flexGrow = Number(flexGrow) + 1;
   }
</script>
</head>
<body>
   <div>決定項目剩余空間縮放：flex-grow</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('son-1')">w-120 ++</button>
   <button onclick="handleClick('son-2')">w-80 ++</button>
   <button onclick="handleClick('son-3')">w-100 ++</button>
</body>
</html>

View Code

3、flex-shrink：默認1，用於決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時大家一起等比縮小；注意，即便設置了固定寬度，也會縮小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #dad {
      position: relative;
      display: flex;
      height: 150px;
   }

   #son-1 {
      width: 400px;
      height: 120px;
      background: blue;
      flex-shrink: 1;
   }

   #son-2 {
      width: 280px;
      height: 80px;
      background: green;
      flex-shrink: 1;
   }

   #son-3 {
      width: 200px;
      height: 100px;
      background: yellow;
      flex-shrink: 1;
   }
  </style>
  <script>
   function handleClick(cls) {
      const flexShrink = document.getElementById(cls).style.flexShrink;
      document.getElementById(cls).style.flexShrink = flexShrink==0?1:0;
   }
</script>
</head>
<body>
   <div>決定項目空間不足時是否縮放：flex-shrink</div>
   <div id="dad">
      <div id="son-1">w-200</div>
      <div id="son-2">w-280</div>
      <div id="son-3">w-200</div>
   </div>
   <button onclick="handleClick('son-1')">w-400 0/1轉換</button>
   <button onclick="handleClick('son-2')">w-280 0/1轉換</button>
   <button onclick="handleClick('son-3')">w-200 0/1轉換</button>
</body>
</html>

View Code

4、flex-basis：默認auto，用於設置項目寬度，默認auto時，項目會保持默認寬度，或者以width為自身的寬度，但如果設置了flex-basis，權重會width屬性高，因此會覆蓋widtn屬性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #dad {
      position: relative;
      display: flex;
      height: 150px;
   }

   #son-1 {
      width: 120px;
      height: 120px;
      background: blue;
      flex-basis: 120px;
   }

   #son-2 {
      width: 80px;
      height: 80px;
      background: green;
      flex-basis: 80px;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
      flex-basis: 100px;
   }
  </style>
  <script>
   function handleClick(cls,minx) {
      if(minx == 1){
         document.getElementById(cls).style.flexBasis = '400px';
      }else{
         document.getElementById(cls).style.flexBasis = '50px';
      }
   }
</script>
</head>
<body>
   <div>決定項目寬度：flex-basis</div>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-80</div>
      <div id="son-3">w-100</div>
   </div>
   <button onclick="handleClick('son-1','1')">w-120 ++</button>
   <button onclick="handleClick('son-1','0')">w-120 --</button>
   <button onclick="handleClick('son-2','1')">w-80 ++</button>
    <button onclick="handleClick('son-2','0')">w-80 --</button>
   <button onclick="handleClick('son-3','1')">w-100 ++</button>
    <button onclick="handleClick('son-3','0')">w-100 --</button>
</body>
</html>

View Code

5、flex-wrap：默認值nowrap，設置項目是否換行；

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   #dad {
      position: relative;
      display: flex;
      /* height: 100px; */
   }

   #son-1 {
      width: 100px;
      height: 100px;
      background: blue;
   }

   #son-2 {
      width: 100px;
      height: 100px;
      background: green;
   }

   #son-3 {
      width: 100px;
      height: 100px;
      background: yellow;
   }
</style>
<script>
   function handleClick(flexWrap) {
      document.getElementById('dad').style.flexWrap = flexWrap;
   }
</script>

<body>
   <div id="dad">
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
      <div id="son-1">w-120</div>
      <div id="son-2">w-120</div>
      <div id="son-3">w-120</div>
   </div>
   <div style="position: relative;">
      <button onclick="handleClick('nowrap')">nowrap</button>
      <button onclick="handleClick('wrap')">wrap</button>
      <button onclick="handleClick('wrap-reverse')">wrap-reverse</button>
   </div>
</body>

</html>

View Code

6、簡寫flex = flex-grow，flex-shrink，flex-basis

單值語法	等同於	備注
flex: initial	flex: 0 1 auto	初始值，常用
flex: 0	flex: 0 1 0%	適用場景少
flex: none	flex: 0 0 auto	推薦
flex: 1	flex: 1 1 0%	推薦
flex: auto	flex: 1 1 auto	適用場景少

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 彈性布局flex的屬性和 flex=1是啥 flex布局常用屬性 flex 布局 flex-basis 屬性 flex布局中flex屬性不生效 CSS3-flex彈性布局之flex屬性 Html布局之CSS屬性Flex Flex布局教程及屬性速查原創：新手布局福音！微信小程序使用flex的一些基礎樣式屬性 flex布局，一排，多排，項目屬性彈性布局（display:flex;）屬性詳解