經常使用的佈局方式之 Flex 佈局

時間  2019-12-04
標籤 經常 使用 佈局 方式 flex 欄目 Flex 简体版
原文   原文鏈接

經常使用的佈局方式之 Flex 佈局

1、 Flex佈局介紹

人們已經慢慢放棄了低版本瀏覽器，因此 flex 佈局是如今首選的佈局方式。 flex 佈局又稱之爲 彈性佈局 ，任何一個標籤均可以使用 flex 佈局，css

行內元素也可使用 flex 佈局， 當時標籤使用了 flex 佈局之後，那麼子元素的 float 、clear 等屬性都將失效。html

.box{
  display: flex;
}

使用了 display: flex 屬性的標籤，咱們稱之爲 容器，它的全部子元素自動成爲容器成員，咱們稱之爲 項目 。瀏覽器

容器 默認有兩個軸，主軸(默認爲水平)和側軸(默認爲側軸)，項目 默認沿主軸排列。佈局

2、 容器的屬性

容器經常使用的屬性有六個。flex

flex-direction          // 控制主軸方向
justify-content         // 設置主軸方向對齊方式
align-items             // 控制側軸方向對齊方式
align-content           // 當側軸內容多行時，設置側軸對齊方式
flex-wrap               // 控制項目是否容許換行
flex-flow               // 是flex-direction 和 flex-wrap 的簡寫

若是沒有特殊說明，如下代碼演示模板一概以下。spa

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</nav>

<style>
.box{
  display: flex;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
div{
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
</style>

2.1 flex-direction

flex-direction 決定主軸的方向，也就是項目的排列方向。code

.box{
  flex-direction: row;
}

clipboard.png

.box{
  flex-direction: row-reverse;
}

clipboard.png

.box{
  flex-direction: column;
}

clipboard.png

.box{
  flex-direction: column-reverse;
}

clipboard.png

2.2 justify-content

justify-content 用來控制項目在主軸的對齊方式。htm

.box{
  justify-content: flex-start;
}

clipboard.png

.box{
  justify-content: flex-end;
}

clipboard.png

.box{
  justify-content: center;
}

clipboard.png

.box{
  justify-content: space-around;
}

clipboard.png

.box{
  justify-content: space-between;
}

clipboard.png

.box{
  justify-content: space-evenly;
}

clipboard.png

2.3 flex-wrap

容器的 flex-wrap 屬性用來控制項目是否容許換行。blog

<nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    flex-wrap: nowrap;
  }
</style>

clipboard.png

.box{
  flex-wrap: wrap;
}

clipboard.png

.box{
  flex-wrap: wrap-reverse;
}

clipboard.png

2.4 align-items

align-items屬性用來控制項目在側軸的對齊方式。ip

.box{
  align-items: flex-start;
}

clipboard.png

.box{
  align-items: flex-end;
}

clipboard.png

.box{
  align-items: center;
}

clipboard.png

2.5 align-content

當側軸有多行時，可使用 align-content 來設置側軸的對齊方式。

<nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    align-content: flex-start;
  }
</style>

clipboard.png

.box{
  align-items: flex-end;
}

clipboard.png

.box{
  align-items: center;
}

clipboard.png

.box{
  align-items: sapce-between;
}

clipboard.png

.box{
  align-items: sapce-around;
}

clipboard.png

2.6 flex-flow

flex-flow 是flex-direction和flex-wrap的簡寫形式。

.box{
  flex-flow: row nowrap;
}

clipboard.png

.box{
  flex-flow: row wrap;
}

clipboard.png

.box{
  flex-flow: column wrap;
}

clipboard.png

.box{
  flex-flow: column nowrap;
}

clipboard.png

3、 項目的屬性

項目的經常使用屬性有三個。

order          // 項目的排列順序
align-self     // 項目在側軸的對齊方式
flex           // flex-grow, flex-shrink 和 flex-basis的簡寫

3.1 order

order 屬性是控制項目的排列順序，默認值是 0，數值越小排列越靠前，能夠有負數。

<nav class="box">
   <div>1</div>
   <div>2</div>
   <div class="test">3</div>
 </nav>
 
 <style>
   .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      order: -1;
    }
 </style>

clipboard.png

3.2 align-self

align-self 是控制當前項目的側軸的對齊方式，能夠覆蓋 align-items 屬性。

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      align-items: center;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      align-self: flex-end;
    }
</style>

clipboard.png

3.3 flex

項目使用的屬性 flex 實際上是 flex-grow(放大), flex-shrink(縮小) 和 flex-basis的簡寫，默認值是 0 1 auto。
咱們一般設置的 flex：1， 其實等價於 flex-grow: 1，也就是佔有剩餘空間的寬度。

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      flex: 1
    }
</style>

clipboard.png

有時候，咱們也會設置 flex: 33.333%， 容器整個寬度就是100%，每一個項目佔33.333%，因此就是一行展現三個。

<nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
   div{
      box-sizing: border-box;
    }
    .box{ 
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      flex: 33.333%;
    }
</style>

clipboard.png

4、 利用 flex 制骰子佈局

4.1 一個點

<nav class="box">
  <div></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
</style>

clipboard.png

4.2 兩個點

<nav class="box">
  <div></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
   .test{
      align-self:flex-end;
   }
</style>

clipboard.png

4.3 三個點

<nav class="box">
  <div></div>
  <div class="center"></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
  .center{
    align-self: center;
  }
   .test{
      align-self:flex-end;
   }
</style>

clipboard.png

4.4 四個點

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
</style>

clipboard.png

4.5 五個點

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .row:nth-child(2){
      display: flex;
      justify-content: center;
    }
</style>

clipboard.png

4.6 六個點

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
</style>

clipboard.png

本文參考了阮一峯大神的 http://www.ruanyifeng.com/blo... 。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程