CSS—flex布局之代码实例

目录

1、骰子的布局

2、网格布局

3、圣杯布局

4、输入框布局

5、悬挂式布局

6、固定的底栏

7、流式布局

---

1、骰子的布局

公共样式 

<style>
    * {
        box-sizing: border-box;
    }
        
    html,
    body {
        height: 95%;
    }
        
    body {
        display: flex;
        /*交叉轴上的对齐方式*/
        align-items: center;
        /*主轴上的对齐方式*/
        justify-content: center;
        /*如何换行*/
        flex-wrap: wrap;
        /*多跟交叉轴线的对齐方式*/
        align-content: center;
    }
        
    [class$="face"] {
        margin: 16px;
        padding: 4px;
        background-color: #e7e7e7;
        width: 104px;
        height: 104px;
        object-fit: contain;
        box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
        border-radius: 10%;
    }
        
    .pip {
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
    }
</style>

筛子布局

<style>
    .first-face {
        display: flex;
        /* 主轴上的对齐方式 */
        justify-content: center;
        /* 交叉轴上的对齐方式 */
        align-items: center;
    }
        
    .second-face {
        display: flex;
        /* 主轴上的对齐方式 */
        justify-content: space-between;
    }
        
    .second-face .pip:nth-of-type(2) {
        /* 项目在交叉轴上的对齐方式 */
        align-self: flex-end;
    }
        
    .third-face {
        display: flex;
        justify-content: space-between;
    }
        
    .third-face .pip:nth-of-type(2) {
        align-self: center;
    }
        
    .third-face .pip:nth-of-type(3) {
        align-self: flex-end;
    }
     
    .fourth-face,
    .sixth-face {
        display: flex;
        justify-content: space-between;
    }
        
    .fourth-face .column,
    .sixth-face .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
        
    .fifth-face {
        display: flex;
        justify-content: space-between;
    }
        
    .fifth-face .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
        
    .fifth-face .column:nth-of-type(2) {
        justify-content: center;
    }
    /* OTHER STYLES */
</style>

html结构

<!-- 一颗黑点 -->
<div class="first-face">
    <span class="pip"></span>
</div>
<!-- 两颗黑点 -->
<div class="second-face">
    <span class="pip"></span>
    <span class="pip"></span>
</div>
<!-- 三颗黑点 -->
<div class="third-face">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
</div>
<!-- 四颗黑点 -->
<div class="fourth-face">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>
<!-- 五颗黑点 -->
<div class="fifth-face">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>
<!-- 六颗黑点 -->
<div class="sixth-face">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>

2、网格布局

基本网格布局

在容器里面平均分配空间，代码如下所示。 

<style>
    .Grid {
        display: flex;
    }
        
    .Grid-cell {
        flex: 1;
        background-color: red;
        margin: 1px;
        height: 100px;
    }
</style>
<div class="Grid">
    <div class="Grid-cell"></div>
</div>
<div class="Grid">
    <div class="Grid-cell"></div>
    <div class="Grid-cell"></div>
</div>
<div class="Grid">
    <div class="Grid-cell"></div>
    <div class="Grid-cell"></div>
    <div class="Grid-cell"></div>
</div>

百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间，代码如下所示。

<style>
    .Grid {
        display: flex;
    }
        
    .Grid-cell {
        flex: 1;
        background-color: red;
        margin: 1px;
        height: 100px;
    }
        
    .u-1of2 {
        flex: 0 0 20%;
    }
</style>
<div class="Grid">
    <div class="Grid-cell u-1of2"></div>
    <div class="Grid-cell"></div>
</div>
<div class="Grid">
    <div class="Grid-cell u-1of2"></div>
    <div class="Grid-cell"></div>
    <div class="Grid-cell"></div>
</div>

3、圣杯布局

圣杯布局是一种最常见的网站布局。

<style>
    * {
        margin: 0;
        padding: 0;
    }
        
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
        
    header,
    footer {
        flex-basis: 100px;
        background-color: red;
    }
        
    .HolyGrail-body {
        display: flex;
        flex: 1;
        background-color: green;
    }
        
    .center {
        flex: 1;
        background-color: aqua;
    }
        
    .left,
    .right {
        flex: 0 0 10%;
    }
        
    .left {
        order: -1;
        background-color: brown;
    }
    /* 如果是小屏幕, 躯干的三栏自动变为垂直叠加 */
    @media (max-width: 768px) {
        .HolyGrail-body {
            flex-direction: column;
            flex: 1;
        }
        .left,
        .center,
        .right {
            flex: auto;
        }
    }
</style>
<header>页头</header>
<div class="HolyGrail-body">
    <main class="center">中间</main>
    <nav class="left">左侧</nav>
    <aside class="right">右侧</aside>
</div>
<footer>页脚</footer>

4、输入框布局

<style>
    div {
        display: flex;
        width: 500px;
        height: 50px;
        background-color: red;
    }
       
    input {
        flex: 1;
    }
        
    span {
        width: 80px;
        background-color: #eee;
        border: 1px solid #A9A9A9;
        border-right: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        
    button {
        width: 50px;
    }
</style>
<div>
    <span>Amount</span>
    <input/>
    <button>Go</button>
</div>

5、悬挂式布局

有时候主栏的左侧或右侧需要一个图片栏。

<style>
    .Media { display: flex; align-items: flex-start; }
    img { margin-right: 1em; }   
    p { flex: 1; }
</style>
<div class="Media">
    <img src="" alt="图片">
    <p>内容</p>
</div>

6、固定的底栏

<style>
    * {
        margin: 0;
        padding: 0;
    }
        
    body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }
        
    main {
        flex: 1;
    }
        
    header,
    footer {
        background-color: aqua;
    }
</style>
<header>页头</header>
<main>内容</main>
<footer>页脚</footer>

7、流式布局

<style>
    .parent {
        width: 200px;
        height: 150px;
        background-color: black;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
        
    .child {
        box-sizing: border-box;
        background-color: white;
        flex: 0 0 25%;
        height: 50px;
        border: 1px solid red;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>