Flex 佈局常見的幾種方式

時間 2019-11-05

標籤 flex 佈局常見的幾種方式欄目 Flex 简体版

原文原文鏈接

flex 以前的佈局方式html

normal flow（正常流或叫文檔流）
float + clear
position relative + absolute
display inline-block
負margin

flex 佈局特色git

塊級元素側重垂直方向、行內佈局側重水平方向，flex 佈局是與方向無關的。
flex 佈局能夠實現空間自動分配、自動對齊（flexible：彈性、靈活）
flex 適用於簡單的線性佈局，更復雜的要交給gird 佈局

`flex container`的六大屬性：

屬性	含義
`flex-direction`	方向
`flex-wrap`	換行
`flex-flow`	上面兩個的簡寫
`justify-content`	主軸方向對齊方式
`align-items`	側軸對齊方式
`align-content`	多行/列內容對齊方式（用的較少）

解釋：
flex-direction：
inherit 繼承
initial 起始
row(默認) 一行展現
row-reverse 反向一行
column 一列排列
column-reverse 反向一列排列github

flex-wrap：
nowrap(默認) 不換行
wrap 換行ide

justify-content：
space-between 多的空間放在全部元素中間
space-around 多的空間放在全部元素周圍
flex-start 全部元素往主軸的起點靠
flex-end 全部元素往主軸的終點靠
center 全部元素往主軸的中間靠佈局

align-items：
stretch(默認) 把全部元素伸開，和最高的那個元素對齊
flex-start 全部元素往側軸的起點靠，不要伸開
flex-end 全部元素往側軸的終點靠，不要伸開
center 全部元素往側軸的中間靠，不要伸開flex

align-content：多行纔有用，和justify-content用法差很少，只有一行的時候align-content沒有任何效果。spa

`flex item`的屬性

屬性	含義
`flex-grow`	增加比例(空間過多時)
`flex-shrink`	收縮比例(空間不夠時)
`flex-basis`	默認大小(通常不用)
`flex`	上面三個的縮寫
`order`	順序(代替雙飛翼)
`align-self`	自身的對齊方式，能夠讓每一個子元素有本身的對齊方式

常見的一些佈局方式：
一、手機頁面佈局：上中下三欄，中間內容不少，高度自適應，上下高度固定。code

<head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        ul{
            list-style:none;
        }
        .container{
            height:100vh;
            display:flex;
            flex-direction:column;
        }
        header{
            height: 100px;
            background: #ddd;
        }
        footer ul{
            height: 100px;
            background: #ddd;
        }
        main{
            flex-grow:1;
            overflow:auto;
        }
        footer > ul{
            display: flex;
        }
        footer > ul > li{
            background: red;
            width:25%;
            height:100%;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>header</header>
        <main>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
        </main>
        <footer>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </footer>
    </div>
</body>

二、產品列表佈局：orm

<head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        ul{
            list-style:none;
            display: flex;
            flex-wrap: wrap;
            width:350px;
            margin:auto;
            border:1px solid black;
            justify-content: space-between;
        }
        li{
            width:100px;
            height: 100px;
            background:#ddd;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

三、簡單的PC頁面佈局：htm

<head>
    <style>
       header{
           height:50px;
           background: #ddd;
       }
        footer{
            height: 50px;
            background: #ddd;
        }
       .content{
           display:flex;
       }
        .content > aside{
            width:120px;
            background: #444;
        }
       .content > main{
           height: 400px;
           flex:1;
           background: red;
       }
       .content > nav{
           width:100px;
           background:green;
       }
    </style>
</head>
<body>
    <header>header</header>
    <div class="content">
        <aside id="aside1"></aside>
        <main></main>
        <nav></nav>
    </div>
    <footer>footer</footer>
</body>

四、完美居中佈局：

<head>
    <style>
        .parent{
            height:400px;
            background: #ddd;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            完美居中完美居中完美居中<br>
            完美居中完美居中<br>
            完美居中<br>
            完美居中<br>
        </div>
    </div>
</body>