flex伸縮佈局

時間  2019-11-17
標籤 flex 伸縮 佈局 欄目 Flex 简体版
原文   原文鏈接

前言:將當前元素的父元素設置爲flex佈局方式,會自動對子元素進行伸縮佈局html

下面將經過如下html文檔對flex佈局進行講解:佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex 佈局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 200px;
            background: #eee;
            margin:10px auto;
        }
        .box div{
            width: 150px;
            height: 150px;
            border:2px solid orange;
            font-size: 48px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>
</html>

下面開始flex屬性樣式講解:flex

 

樣式描述spa

 樣式表現 屬性值
一.主軸的方向:

初始狀況下佈局是這樣的:3d

 
.box{
　　width: 600px;
　　height: 200px;
　　background: #eee;
　　margin:10px auto;
}
.box div{
　　width: 150px;
　　height: 150px;
　　border:2px solid orange;
}

 

當父元素添加display:flex;屬性時,佈局發生變化:code

  • 伸縮佈局主軸從左到右(主軸貼靠父元素左邊)
  • 子元素的並排一行,block屬性失效
 
.box{
　　display:flex;
}

 

當父元素設置display:flex;時:htm

  • 將主軸方向改成列方向從上到下(主軸貼靠父元素上邊)
  • 注意:若是父元素高度有限,此時子元素有內容撐出高度,height屬性將根據內容的高度適應;子元素無內容則自動等分父元素高度
  • 若是父元素高度足夠,子元素則顯示本身的高度
 
.box{
　　display: flex;
　　flex-direction: column;
}

當父元素設置display:flex;時:blog

  • 將主軸方向改成從右到左;(主軸貼靠父元素右邊)
   
.box{
　　display: flex;
　　flex-direction: column;
}
 

當父元素設置display:flex;時:文檔

  • 將主軸方向改成從下到上;(主軸貼靠父元素下邊)
   
.box{
　　height: 600px;
　　display: flex;
　　flex-direction: column-reverse;
}

 
二.主軸的內容佈局方式(主軸設置從左到右,默認貼靠上邊):
 佈局貼靠左邊 
.box{
　　display: flex;
　　justify-content: flex-start;
}
 佈局貼靠右邊 
.box{
    display: flex;
    justify-content: flex-end;
}
 佈局居中   
.box{
    display: flex;
    justify-content: center;
}
 佈局居中分佈 , 等距分開 , 與父元素有間距   
.box{
    display: flex;
    justify-content: space-around;
}
 佈局居中分佈 , 等距分開 , 與父元素無間距   
.box{
    display: flex;
    justify-content: space-between;
}
三.側軸方向的內容佈局方式(主軸設置從左到右,默認貼靠左邊):
 佈局貼靠上邊(默認值)   
.box{
    display: flex;
    align-items: flex-start;
}
 佈局貼靠下邊   
.box{
    display: flex;
    align-items: flex-end;
}

佈局與文字基準線對齊it

   
.box{
    display: flex;
    align-items: baseline;
}
.box2{
　　 line-height:100px;
}
 當子元素沒有設置高度時,佈局豎直方向高度拉伸填充(默認值)   
.box{
    display: flex;
    align-items: stretch;
}
.box div{
    height:auto;
}
三.控制主軸元素換行:

 主軸不換行狀態下:(默認)

flex-wrap:nowrap;

 


.box{
    height: 400px;
    display: flex;
}
.box div{
    height: 60px;
}
 主軸換行:   
.box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
}
.box div{
    height: 60px;
}

 
四.換行後側軸方向的佈局(換行狀況下,主軸多行從左到右,從上到下,默認貼靠右邊):
 佈局貼靠上邊   
.box{
　　height: 400px;
　　display: flex;
　　flex-wrap: wrap;
　　align-content: flex-start;
}
.box div{
　　height: 60px;
}

 
 佈局貼靠下邊   
.box{
　　height: 400px;
　　display: flex;
　　flex-wrap: wrap;
　　align-content: flex-end;
}
.box div{
　　height: 60px;
}

 
 佈局在豎直方向上垂直居中   
.box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-center;
}
.box div{
    height: 60px;
}
 佈局在豎直方向上等距分開,且與父元素有間距   
.box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.box div{
    height: 60px;
}
 佈局在豎直方向上等距分開,且與父元素有間距   
.box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.box div{
    height: 60px;
}
 佈局在豎直方向上等距分開,且與父元素無間距   
.box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.box div{
    height: 60px;
}
五.經典佈局方式:
 雙飛翼佈局 
.box{
    display: flex;
}
.box div{
    height: auto
}
.box .box1{
    width: 100px;
}
.box .box2{
    flex: 1;
}
.box .box3{
    width: 100px;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程