我的柔性盒布局中的行不是按需要排列的。

Question

我正在尝试创建一个包含2列和多行的页面。

下面有CSS，它将它们分成2列和多行。

但我遇到了两个问题：

，

• ，这两列实际上相距很远。如果包含在任何一列中的文本有不同数量的文本，则行不能正确排列。

例如，我有一个称为Description的行。左列被称为Description，但是右侧列中的实际内容可以是一个完整的段落，这就抛出了对齐的问题。

我曾经尝试过玩浮点:左和浮:右，但这会带来相同的或类似的问题。

有办法使行正确排列吗？

谢谢！

这是我的CSS：

#Castle_Properties .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }

  #Castle_Properties .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

以下是我的HTML：

<div id="Castle_Properties">
  <div id="KingHeading">{KingVal}</div> 
  <div className="row">
    <div className="column">
        <div>Country</div>
        <div>Type</div>
        <div>Name</div>
        <div>Description</div>
        <div>Date Built</div>
    </div>
    <div className="column">
        <div>{countryVal}</div>
        <div>{typeVal}</div>
        <div>{nameVal}</div>
        <div>{descVal}</div>
        <div>{builtDateVal}</div>
    </div>
</div>

Answer 1

Flex容器是独立的，它们与页面上的其他flex容器没有关系，因此使用flexbox构建的任何网格都不是真正的网格。

您想要的是一个真正的网格，它可以用CSS网格来完成--需要对标记进行更改。

​

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-flow: column;
}

[label] {
  grid-column: 1;
}

<div grid>
  <div label>Country</div>
  <div label>Type</div>
  <div label>Name</div>
  <div label>Description</div>
  <div label>Date Built</div>
  <div>{countryVal}</div>
  <div>Lorem ipsum adipisicing</div>
  <div>{nameVal}</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

​

Flexbox解决方案是将两行放在一个元素中。

​

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: flex;
  flex-direction: column;
}

[row] {
  display: flex;
}

[row]>div:nth-child(1) {
  flex: 1 0 0;
}
[row]>div:nth-child(2) {
  flex: 3 0 0;
}

<div grid>
  <div row>
    <div>Country</div>
    <div>{countryVal}</div>
  </div>
  <div row>
    <div>Type</div>
    <div>Lorem ipsum adipisicing</div>
  </div>
  <div row>
    <div>Name</div>
    <div>{nameVal}</div>
  </div>
  <div row>
    <div>Description</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div row>
    <div>Date Built</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

​

这是在不指定任何固定宽度的情况下所能得到的最好结果。

Answer 2

首先为行设置属性，因为它是两列的容器

#Castle_Properties {

} 

.row {
    display : flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center ;
} 

.row div {
    width: 100%;
}

. column {
    display : flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly; 
}

.column div {
    width: 100%;
}