跳到主要内容

多列

2023年02月18日
柏拉文
越努力，越幸运

一、Flex 多列布局​

场景背景: 需要有多列,并且有固定间距

场景解决: 通过 Flex 划分每一行的元素排列, 通过 Grid 中的 gap 属性规定间距

场景实现

实时编辑器
function Test(props) {
  const container = {
    width: "400px",
    display: "flex",
    gap: "24px 24px",
    flexWrap: "wrap",
    backgroundColor: "red"
  }
  const item = {
    width: "80px",
    height: "100px",
    flex: "1 1 auto",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
     </div>
  );
}
结果
Loading...

二、Grid 多列布局​

场景背景: 需要有多列,并且有固定间距

场景解决: 通过 Flex 划分每一行的元素排列, 通过 Grid 中的 gap 属性规定间距

场景实现

实时编辑器
function Test(props) {
  const container = {
    width: "400px",
    display: "grid",
    gap: "24px 24px",
    backgroundColor: "red",
    gridTemplateColumns: "repeat(4, 1fr)",
  }
  const item = {
    height: "100px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
      </div>
  );
}
结果
Loading...

三、Table 多列布局​

场景背景: 需要有多列,并且有固定间距

场景解决: 通过 Flex 划分每一行的元素排列, 通过 Grid 中的 gap 属性规定间距

场景实现

实时编辑器
function Test(props) {
  const table = {
    width: "400px",
    display: "table",
    borderSpacing: "8px",
    backgroundColor: "red",
  }
  const row = {
    display: 'table-row'
  }
  const column = {
    display: "table-cell",
    height: "100px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ table }>
        <div style={ row }>
            <div style={ column  }></div>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
        </div>
        <div style={ row }>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
        </div>
      </div>
  );
}
结果
Loading...

四、Column 多列布局​

场景背景: 实现 4 列多列布局

场景解决: 通过 columns: 4 auto 来实现多列布局

实时编辑器
function Test(props) {
    const container = {
        width: "200px",
        columns: "4 24px",
        backgroundColor: "red",
    }
    const item = {
        height: "80px",
        backgroundColor: "yellow"
    }
    return (
        <div style={ container }>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
        </div>
    );
}
结果
Loading...