理解flexbox（一）

flexbox是什麼

     根據規範中的描述可知道，flexbox模塊提供了一個有效的佈局方式，即便不知道視窗大小或者未知元素狀況之下均可以智能的，靈活的調用和分配元素和空間二者之間的關係。

如何開始使用flexbox

     開始使用flexbox時，你所要作的第一件事情就是聲明一個flex容器。好比：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

      這是一個無序列表ul,裏面有三個列表元素li。ul爲父元素，li爲子元素。要開始使用flexbox，必須先讓父元素變成一個flex容器。能夠在父元素中顯示的設置display：flex或者display:inline-flex。這樣就能夠開始使用flexbox模塊了。

     爲以上html添加基本樣式，以下:

ul{
  display:flex; 
}

li{
  width:100px;
  height:100px;
  background:red;
  margin:10px;  
}

效果以下：

   一旦顯式的設置了display屬性的值爲flex，無序列表ul就會自動變成flex容器，而其子元素（在本例中是指列表元素li）就變成了flex項目。

關鍵字：

• flex容器：父元素顯式設置了display:flex
• flex項目：flex容器內的子元素

flex容器屬性

flex-direction  ||  flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction

控制flex項目沿着主軸（水平方向）的排列方向，有四個值

row || column || row-reverse || column-reverse:分別是行，列，行的反方向，列的反方向，其中row是默認值。

代碼以下：

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

ul{
     display:flex;  
     border:1px solid black;
     flex-direction: row; //或者 row-reverse || column || column-reverse
 }
li{
    text-align: center;
    font-size:20px;
    width:100px;
    height:100px;
    background-color: red;
    margin: 10px;
 }

 四中效果以下：

row:

row-reverse:

column:

column-reverse:

 flex-wrap

　wrap|| nowrap|| wrap-reverse :其中nowrap是默認值。　　

代碼以下：

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
</ul>

ul{
      display:flex;  
      border:1px solid black;
　　　 flex-wrap:wrap  //或者 nowrap || wrap-reverse
  }

  li{
     text-align: center;
     font-size:20px;
     width:100px;
     height:100px;
     background-color: red;
     margin: 10px;
   }

效果以下:

no-wrap:

wrap:

wrap-reverse:

 flex-flow

　flex-flow是flex-direction和flow-wrap兩個屬性的速記屬性。

值能夠是：

flex-flow: row wrap

 justify-content

定義flex項目在水平方向上的對齊方式，其值：flex-start || flex-end ||center || space-between || space-around，其中flex-start是默認值。

代碼以下：

ul{
     display:flex;  
     border:1px solid black;
     list-style: none;
     justify-content: space-between; //或者 flex-start || flex-end || center || space-between || space-around
　　　padding-left:0;
  }

  li{
     text-align: center;
     font-size:20px;
     width:100px;
     height:100px;
     background-color: red;
     margin: 10px;
  }

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
</ul>

效果以下:

flex-start:

flex-end:

center:

space-between:

space-around:

align-items

align-items屬性相似於justify-content屬性。只有理解了justify-content屬性，才能更好地理解這個屬性。屬性值： flex-start|| flex-end || center|| stretch ||baseline,默認值是stretch。

代碼以下：

ul{
     display:flex;  
     border:1px solid black;
     list-style: none;
     padding-left:0;
     align-items: stretch;
　　 height:100px;
}

li{
     text-align: center;
     font-size:20px;
     width:100px;
     background-color: red;
     margin: 10px;
}　　　　　　　　　　　　　　　　　　　　　

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

 效果以下：

stretch: 讓全部flex項目的高度和flex容器高度同樣。

flex-start:讓全部flex項目靠cross-Axis邊緣(頂部對齊)

 

flex-end: 讓全部Flex項目靠Cross-Axis結束邊緣（底部對齊）

center:讓全部flex項目在cross-Axis中間(居中對齊)

basline: 讓全部flex項目在cross-Axis上沿本身的極限對齊，爲了顯示出差異，文字大小作了調整，第一行文字底部對齊

align-center

還記得前面討論的wrap屬性嗎？咱們在Flex容器中添加了更多的Flex項目。讓Flex容器中的Flex項目多行排列。

align-center 屬性用於多行的flex容器。它也是用來控制flex項目在flex容器裏的排列方式，排列效果和align-items值同樣，除了baseline屬性值。

值有：stretch ||　flex-start || flex-end || center ,其中stretch爲默認值

效果以下：

stretch:

flex-start:

flex-end:

center:

總結，屬性值爲stretch時，能夠沒必要爲flex容器設置高度，它會自動充滿容器