捉蟲放大鏡

公告

六、響應式頁面設計（一）

一、創建媒體查詢、使用視窗尺寸

<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
.box{
    width: 500px;
    height: 500px;
    margin: auto;
    background-color: gray;
}
/* media表示媒體查詢當前窗口的大小 */
/* 1vw:當前窗口寬度的1%; 1vh:當前窗口高度的1% */
/* 1vmax:當前窗口寬高最大值的1%; 1vmin:當前窗口寬高最小值的1% */

@media(min-width:800px) {
    .box {
        width: 10vw;
        height: 20vh;
    }
}
@media(max-height: 200px){
    .box {
        width: 50vmax;
        height: 50vmin;
    }
}

</style>
<div class="box"></div>
</body>
</html>

二、flex的應用

1.flex父元素常用屬性整理

<!DOCTYPE html>
<html>
<head></head>
<body>

<style>
.box-container1 {
    width: 600px;
    height: 400px;
    margin: auto;
    border: 1px solid gray;
    /* display:flex 父元素下所有子元素均遵循響應式布局 */
    display: flex;
    
    /*
        flex-direction表示子元素排列方向： row -- 從左到右
                                           row-reverse -- 從右到左
                                           column -- 從上到下
                                           column-reverse -- 從下到上
    */
    flex-direction: row;
    
    /*
        justify-content表示子元素沿主軸排列形式：
        flex-start -- （flex-direction: row時第一個元素靠左邊沿）
        flex-end --（flex-direction: row時最后一個元素靠右邊沿）
        space-between -- （flex-direction:row時，第一個元素靠左邊沿，最后一個元素靠右邊沿，其他均勻分布）
        space-around  --（flex-direction:row時，元素橫向均勻分布）
    */
    justify-content: space-around;
    /*
        align-items表示子元素沿交叉軸排列形式：
        flex-start -- （flex-direction: row時，豎排第一個元素靠上邊沿）
        flex-end --（flex-direction: row時，豎排最后一個元素靠下邊沿）
        center -- (flex-direction: row時，元素排縱軸中間)
    */
    align-items: center;
    
    /*
        flex-wrap:表示是否換行。默認不換行，子元素自動縮放鋪滿一行/一列
        nowrap:不換行
        wrap:換行
        wrap-reverse:反向換行
    */
    flex-wrap: wrap;
}

.box1 {
    background-color: red;
    width: 25%;
    height: 25%
}

.box2 {
    background-color: blue;
    width: 25%;
    height: 25%;
}
</style>
<div class="box-container1">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>

</body>
</html>

2.flex子元素常用屬性整理

<!DOCTYPE html>
<html>
<head></head>
<body>

<style>
.box-container1 {
    height: 400px;
    margin: auto;
    border: 1px solid gray;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.box1 {
    background-color: red;
    height: 200px;
    /*
        flex短方法屬性包括： flex-grow(放大) flex-shrink(縮小) flex-basis(基本大小)
    */
    flex: 2 2 300px;
    /* order 是排序規則 */
    order: 2;
    /* 針對單個元素的交叉軸位置 */
    align-self: flex-start;
}

.box2 {
    background-color: blue;
    height: 200px;
    flex: 1 1 300px;
    order: 1;
    
}

</style>
<div class="box-container1">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

</body>
</html>

posted on 2021-03-13 17:09 捉蟲放大鏡閱讀(48) 評論(0) 收藏舉報

刷新頁面返回頂部