使用css3佈局屬性flex詳細介紹

這篇文章敘述使用css3佈局屬性flex詳細介紹

html程式碼如下:

<ul class="ul_box">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">html5</a></li>
    <li><a href="#">css3</a></li>
    <li><a href="#">jquery</a></li></ul>

css程式碼如下:

.ul_box{
    margin:0;
    padding: 0;
    list-style: none;    /*display: flex将对象作为弹性伸缩盒显示;
    flex-flow:flex-direction(确定弹性子元素排列方式)和
              flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
    写入父容器里;    */
    display: flex;
    flex-flow: row wrap;
}.ul_box li{
    text-align: center;
    height:40px;
    line-height: 40px;    /*flex:flex-grow(设置弹性子元素的扩展比率)
     *        flex-shrink(设置弹性子元素的收缩比率)
     *        flex-basis(指定弹性子元素伸缩前的默认大小值，相当于width和height属性。)
     * 这三种属性的复合属性，写入子容器里;*/
    flex: 1 1 100%;
}.ul_box li a{
    text-decoration: none;
    color:#fff;
}.ul_box li:nth-child(1){
    background: #008000;
}.ul_box li:nth-child(2){
    background: #4169E1;
}.ul_box li:nth-child(3){
    background: #8A2BE2;
}.ul_box li:nth-child(4){
    background: #A52A2A;
}.ul_box li:nth-child(5){
    background: #FFA500;
}.ul_box li:nth-child(6){
    background:#9ACD32;
}@media (min-width:480px ) {
    .ul_box li{
        flex: 1 1 50%;
    }}
@media (min-width:768px ) {
    .ul_box{
        flex-flow: row nowrap;
    }}

#以下6個屬性設定在容器上：

• flex-direction　　容器內項目的排列方向(預設橫向排列)　　

• flex-wrap　　容器內項目換行方式

• #flex-flow　　以上兩個屬性的簡寫方式
  just
if
• y-content　　項目在主軸上的對齊方式

• align-items　　專案在交叉軸上如何對齊

#align-content　　定義了多根軸線的對齊方式。如果項目只有一根軸線，則該屬性不起作用。

• 容器中項目的屬性：

  <code>

#order　　項目的排列順序。數值越小，排列越前，預設為0。

• <code><code>flex-grow　　專案的放大比例，預設為

  0
，即如果存在剩餘空間，也不放大。

• <code>

flex-shrink　　項目的縮小比例，預設為1，即如果空間不足，該項目將縮小。

• <code><code>flex-basis　　在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為

  auto
，即項目的本來大小。

• <code><code><code>flex　　是flex-grow<code>, flex-shrink<code> 和 #flex-basis的簡寫，預設值為

  0 1 auto
。後兩個屬性可選。

• <code><code><code>align-self　　允許單一項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。預設值為auto<code>，表示繼承<code>父元素的align-items屬性，如果沒有父元素，則等同於

  stretch
。

###### ###

以上是使用css3佈局屬性flex詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！