flex绘制table表格，支持文字自动换行和合并单元格，高度自适应

一、flex布局方法和属性教程

2、简单理解

01--容器属性

flex-direction 左右，上下布局
flex-wrap 是否换行，反向换行
flex-flow 包含flex-direction和flex-wrap 属性
justify-content 项目(子元素)是否水平居中
align-items 项目(子元素)是否水平居中
align-content 项目(子元素)多根轴线(多列)是否水平居中

03--项目属性

order 子元素排列顺序
flex-grow 子元素放大，默认等比
flex-shrink 子元素缩小，默认等比
flex-basis 可以设定子元素固定大小
flex flex-grow, flex-shrink 和 flex-basis的简写
align-self 子元素自定义垂直对齐方式

flex绘制table表格，支持文字自动换行，高度自适应(宽度固定)

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="table">
            <div class="flex-box header">
                <div class="flex-cell1 border-rb">
                    <div>序号XXXXXXXXXXXXXXXXXX</div>  
                </div>
                <div class="flex-cell2 border-rb">配件名称xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

猜你喜欢

目录

热门文章