Flex 布局 - 经典示例

冷不防 2022-05-28 10:41 246阅读 0赞

## 骰子的布局 ##

骰子的一面，最多可以放置 6 个点。

下面，就来看看 Flex 如何实现，从 1 个点到 6 个点的布局。

div 元素（代表骰子的正面）是 Flex 容器（Flex box）。

span 元素（代表骰子正面中的一个点）是 Flex 项目（Flex item）。

如果有多个项目，就要添加多个 span 元素，以此类推。

通用 CSS 代码如下：

/* width = border + padding + 内容的 width */
    * { box-sizing: border-box; }
    
    html, body { height: 100%; }
    
    body { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; border: 1px solid grey; background: #222; }
    
    /* 匹配所有包含 class 属性，且属性值以 box 结尾的元素 */
    [class$="box"] { margin: 16px; padding: 4px; background-color: #e7e7e7; width: 104px; height: 104px; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%; }
    
    /* 骰子中的一个小圆点 */
    .item { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 4px; background-color: #333; box-shadow: inset 0 3px #111, inset 0 -3px #555; }

### 单个项目 ###

HTML 代码如下：

首先，只有左上角 1 个点的情况。Flex布局默认就是首行左对齐。

.box { display: flex; }

设置项目在主轴上的对齐方式。

居中对齐：

.box { display: flex; justify-content: center; }

右对齐：

.box { display: flex; justify-content: flex-end; }

设置容器中的项目在交叉轴上的对齐方式。

.box { display: flex; justify-content: center; align-items: center; }

### 两个项目 ###

HTML 代码如下：

顶部，水平两端对齐：

.box { display: flex; justify-content: space-between; }

靠左，垂直两端对齐：

.box { display: flex; flex-direction: column; justify-content: space-between; }

居中，垂直两端对齐：

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

居右，垂直两端对齐：

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

垂直居中，水平两端对齐：

.box { display: flex; align-items: center; justify-content: space-between; }

左上角一个点，中心一点：

.box { display: flex; }
    
    .item:nth-child(2) { align-self: center; }

左上角一个点，右下角一个点：

.box { display: flex; justify-content: space-between; }
    
    .item:nth-child(2) { align-self: flex-end; }

### 三个项目 ###

HTML 代码如下：

三个点形成一条反斜线：

.box { display: flex; }
    
    .item:nth-child(2) { align-self: center; }
    
    .item:nth-child(3) { align-self: flex-end; }

### 四个项目 ###

HTML 代码如下：

顶部三个点，右下角一个点：

.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; }

四个角各一个点：

需修改 HTML 代码，采用容器嵌套（嵌套 Flex box）：

CSS 代码如下：

.box { display: flex; flex-wrap: wrap; align-content: space-between; }
    
    .column { /*width: 100%;*/ flex-basis: 100%; display: flex; justify-content: space-between; }

### 五个项目 ###

形如五筒的五个点：

HTML：

CSS：

.box { display: flex; flex-wrap: wrap; align-content: space-between; }
    
    .column:nth-child(1), .column:nth-child(3) { /* width: 100%; 也可以 */ flex-basis: 100%; display: flex; justify-content: space-between; }
    
    .column:nth-child(2) { width: 100%; display: flex; justify-content: center; }

### 六个项目 ###

顶部三个，底部三个。

HTML：

CSS：

.box { display: flex; flex-wrap: wrap; align-content: space-between; }

左侧三个，右侧三个（形如六筒）。

.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }

当然，你也可以用 Flex box 嵌套，来实现形如六筒的布局。

### 总结 ###

Flex box（弹性盒子）的布局方式非常灵活，凡是能用单个盒子实现的布局，也可以用嵌套的方式来实现。Flex box 的嵌套，可以实现更加复杂的CSS布局。

## 网格布局 ##

### 基本网格布局 ###

最简单的网格布局，就是平均分布。在容器（box）里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目（item）的自动缩放。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <style> *, :after, :before { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; color: #404040; font-weight: 400; /*浏览器默认文字大小，通常是16px。16px*62.5%=10px，也就是说，html中的字体大小为10px。*/ font-size: 62.5%; border: 1px solid grey; } body { display: flex; flex-direction: column; /*font-size 属性的 em 是相对父元素的字体大小，其他属性的 em 是相对相当于当前元素的字体大小。*/ font-size: 1.5em; } .Grid { display: flex; flex-wrap: wrap; padding-right: 1em; } .u-textCenter { text-align: center!important; } .Grid-cell { padding: 1em 0 0 1em; flex: 1; } .Demo { width: 100%; padding: 1.5em 1em 0; background: hsla(31,15%,50%,.1); border-radius: 3px; } /*这个伪类主要是配合上面的padding实现内容的垂直居中*/ .Demo:after { content: '\00a0'; display: block; margin-top: 1.5em; height: 0; visibility: hidden; } .Grid--flexCells>.Grid-cell { display: flex; } </style>
    <body>
    
    <div class="Grid u-textCenter">
        <div class="Grid-cell">
            <div class="Demo">1/2</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/2</div>
        </div>
    </div>
    
    <div class="Grid u-textCenter">
        <div class="Grid-cell">
            <div class="Demo">1/3</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/3</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/3</div>
        </div>
    </div>
    
    <div class="Grid u-textCenter">
        <div class="Grid-cell">
            <div class="Demo">1/4</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/4</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/4</div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">1/4</div>
        </div>
    </div>
    
    <div class="Grid Grid--flexCells">
        <div class="Grid-cell">
            <div class="Demo">
                Full-height, even when my content doesn't fill the space.
            </div>
        </div>
        <div class="Grid-cell">
            <div class="Demo">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
            </div>
        </div>
    </div>
    
    <div class="Grid u-textCenter">
        <div class="Grid-cell">
            <div class="Demo">100%</div>
        </div>
    </div>
    
    </body>
    </html>

### 百分比布局 ###

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <style> * { /* 规范浏览器对盒装模型的解析行为：width = border + padding + 内容的 width */ box-sizing: border-box; margin: 0; padding: 0; } html { /* 浏览器默认文字大小，通常是16px。16px*62.5%=10px，也就是说，html中的字体大小为10px。 */ font-size: 62.5%; border: 1px solid black; height: 100%; } body { /* rem 是相对于根元素hmtl 的字体大小 */ font-size: 1.5rem; } .Grid { display: flex; } .Grid-cell { display:flex; flex: 1; padding: 1rem 1rem; margin: 2rem 1rem 0; border-radius: 3px; align-items: center; justify-content: center; background: hsla(31,15%,50%,.1); } .cell-1 { flex: 0 0 50%; } .cell-2 { flex: 0 0 66.66666% } </style>
    <body>
    
    <div class="Grid">
        <div class="Grid-cell cell-1">2/4</div>
        <div class="Grid-cell">1/4</div>
        <div class="Grid-cell">1/4</div>
    </div>
    
    <div class="Grid">
        <div class="Grid-cell">复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机复读机</div>
        <div class="Grid-cell cell-2">2/3</div>
    </div>
    
    <div class="Grid">
        <div class="Grid-cell">1/3</div>
        <div class="Grid-cell">1/3</div>
        <div class="Grid-cell">1/3</div>
    </div>
    
    <div class="Grid">
        <div class="Grid-cell">100%</div>
    </div>
    
    </body>
    </html>