Flex布局实现table

最新推荐文章于 2024-07-07 17:09:26 发布

lianflower

最新推荐文章于 2024-07-07 17:09:26 发布

阅读量6.2k

点赞数

本文链接：https://blog.csdn.net/lianflower/article/details/105390833

版权

Css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

参考：https://stackoverflow.com/questions/48570109/layout-a-flex-box-similar-to-a-table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*使用Flex布局*/
            display: flex;
            /*垂直方向布局*/
            flex-direction: column;
        }
        body .tbl:first-child {
            border-top: red solid 1px;
        }
        .tbl {
            width: 50%;
            height: 100px;
            /*使用Flex布局，默认为水平方向布局*/
            display: flex;
            border-left: red solid 1px;
            border-right: red solid 1px;
            border-bottom: red solid 1px;
        }
        .cell {
            /*其实这里也可以将宽度设置为2%、5%、10%等，因为页面要展示7列，100 / 7 约等于14%，所以这里的宽度最好不超过14%(不过超过了，在页面展示上貌似也没什么问题，不知道会不会有潜在的问题)*/
            /*因为是约等于14%，所以还会剩余一些空间，我在下面定义了flex-grow的值为1，即剩余的空间，会被这7列平分*/
            /*如果这里没有设置宽度，那么当文本内容过多时，该列的宽度会自动扩大*/
            width: 1%;
            height: 100%;
            /*定义项目的放大比例，如果值为1，则所有的项目将等分剩余的空间*/
            /*因为当前是水平方向布局，所以等分的是剩余的width*/
            flex-grow: 1;
            display: flex;
            /*水平居中、垂直居中*/
            justify-content: center;
            align-items: center;
            /*换行*/
            word-break: break-all;
            word-wrap: break-word;
            white-space: normal;
            border-right: green solid 1px;
        }
        .tbl div:last-child {
            border-right: 0;
        }
    </style>
</head>
<body>
<div class="tbl">
    <div class="cell">22</div>
    <div class="cell">2111111ddd11111111111111111112</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">2sssssssssssssssssssss2</div>
    <div class="cell">22</div>
</div>
<div class="tbl">
    <div class="cell">22</div>
    <div class="cell">2111111ddd1111111111111112</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">2sssssssssssssssssssss2</div>
    <div class="cell">22</div>
</div>
<div class="tbl">
    <div class="cell">22</div>
    <div class="cell">2111111ddd1111111111111112</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">2sssssssssssssssssssss2</div>
    <div class="cell">22</div>
</div>
<div class="tbl">
    <div class="cell">22</div>
    <div class="cell">2111111ddd1111111111111112</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">22</div>
    <div class="cell">2sssssssssssssssssssss2</div>
    <div class="cell">22</div>
</div>
</body>
</html>