Flexbox有一些布局问题 [英] having some layout issues with Flexbox

问题描述

我正在玩flexbox，但仍然遇到一些问题..我几乎有我想要的：

2. 
   
3. 
   
4. 
   
5. 在中心区域的标签


6. 文本顶部有数字框。


7. 在一行上有多个

问题

1. 希望绿色框和蓝色框之间有间距。试图使用空间周围，但它似乎没有做我想要的。我也想要容器是相同的大小，但不知道如何做，所以它会响应。


2. 希望中心中的文字实际上位于自己的中心，而不仅仅是p标签。


3. 在更大的屏幕上，多个容器装在一条线上。






  .flex-container {display：flex; flex-direction：column;背景颜色：灰色padding：0;}。flex-sub-container {display：flex; flex-direction：row; justify-content：space-between;}。flex-item-left-corner {/ * background-color：red; * / margin：0; padding：0;}。flex-item-right-corner {/ * background-color：red; * / margin：0; padding：0; justify-content：flex-end;} flex-bottom-middle {/ * background-color：red; * / align-self：center; margin：0;}。flex-sub-container2 {/ * background-color：yellow; * / display：flex; flex-direction：row; justify-content：center;}。flex-sub-item {background-color：green;显示：flex; flex-direction：column; align-items：center; flex-grow：1;}。flex-qty {margin：0; font-size：28pt;}。flex-qty-label {margin：0 5pt 5pt 5pt;}。flex-center {background-color：royalblue; align-self：center; font-size：15pt; flex-grow：3;}  

 < div class = flex-container card-panel teal lighten-2> < div> < div class =flex-sub-container> < p class =flex-item-left-corner>左上< / p> < p class =flex-item-right-corner>右顶部< / p> < / div> < / div> < div> < div class =flex-sub-container2> < div class =flex-sub-item> < p class =flex-qty> 7< / p> < p class =flex-qty-label>标签< / p> < / div> < p class =flex-center>这是我很长的中心文字。< / p> < / div> < / div> < p class =flex-bottom-middle>底部中< / p>< / div>< div class =flex-container card-panel teal lighten-2> < div> < div class =flex-sub-container> < p class =flex-item-left-corner>左上< / p> < p class =flex-item-right-corner>右顶部< / p> < / div> < / div> < div> < div class =flex-sub-container2> < div class =flex-sub-item> < p class =flex-qty> 7< / p> < p class =flex-qty-label>标签< / p> < / div> < p class =flex-center>这是我很长的中心文字。< / p> < / div> < / div> < p class =flex-bottom-middle>底部中间< / p>< / div>  

>


解决方案




绿色框和蓝色框之间的间距。试图使用空间周围，但它似乎没有做我想要的。




只是在它们之间添加了一些边距。 空格选项只有在有实际空间时才有效... ie。




我也希望容器具有相同的大小，但不知道如何





希望中心中的文本实际上位于自身的中心，而不仅仅是p标签。




在div中包含 p ，使得两个div的高度相等，像往常一样




想要在更大的屏幕上放置多个容器。




正如你所说，你可以添加一个flex-container ）。




根容器之间的间距。




只需 margin-bottom





  .flex-container {display：flex; flex-direction：column;背景颜色：灰色padding：0; margin-bottom：1em;}。flex-sub-container {display：flex; flex-direction：row; justify-content：space-between;}。flex-item-left-corner {/ * background-color：red; * / margin：0; padding：0;}。flex-item-right-corner {/ * background-color：red; * / margin：0; padding：0; justify-content：flex-end;} flex-bottom-middle {/ * background-color：red; * / align-self：center; margin：0;}。flex-sub-container2 {/ * background-color：yellow; * / display：flex; justify-content：center;}。flex-sub-item {background-color：green;显示：flex; flex-direction：column; align-items：center; flex-grow：1;}。flex-qty {margin：0; font-size：28pt;}。flex-qty-label {margin：0 5pt 5pt 5pt;}。flex-center {background-color：royalblue; font-size：15pt; flex：3; margin-left：2em; text-align：center;}  

  flex-container card-panel teal lighten-2> < div> < div class =flex-sub-container> < p class =flex-item-left-corner>左上< / p> < p class =flex-item-right-corner>右顶部< / p> < / div> < / div> < div> < div class =flex-sub-container2> < div class =flex-sub-item> < p class =flex-qty> 7< / p> < p class =flex-qty-label>标签< / p> < / div> < div class =flex-center> < p>这是我很长的中心文字。< / p> < / div> < / div> < / div> < p class =flex-bottom-middle>底部中< / p>< / div>< div class =flex-container card-panel teal lighten-2> < div> < div class =flex-sub-container> < p class =flex-item-left-corner>左上< / p> < p class =flex-item-right-corner>右顶部< / p> < / div> < / div> < div> < div class =flex-sub-container2> < div class =flex-sub-item> < p class =flex-qty> 7< / p> < p class =flex-qty-label>标签< / p> < / div> < div class =flex-center> < p>这是我很长的中心文字。< / p> < / div> < / div> < / div> < p class =flex-bottom-middle>底部中间< / p>< / div>  

>


I am playing around with flexbox but still running into some issues.. I almost have what I want:

1. label in Top left of first container
2. label in Top right of first container
3. Label in bottom middle of first container
4. box that has "number" on top of "Label"
5. text in center area.
6. Have multiple of these on one line(I have not done this yet, right now if I made another it would be it's own line).

Problems

1. Would like spacing between green box and blue box. Tried to use "space-around" but it does not seem to do what I want. I also would like the containers to be the same size but not sure how to do that so it would be responsive.
2. Would like the text in the center to actually be center of itself as well not just the "p" tag.
3. Would like to have it on bigger screens that more than one container fits on a line. Not sure if I need to wrap another flex container around it.
4. Spacing between the root containers.

.flex-container {

  display: flex;

  flex-direction: column;

  background-color: grey;

  padding: 0;


}

.flex-sub-container {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

.flex-item-left-corner {

  /*background-color: red;*/

  margin: 0;

  padding: 0;

}

.flex-item-right-corner {

  /*background-color: red;*/

  margin: 0;

  padding: 0;

  justify-content: flex-end;

}

.flex-bottom-middle {

  /*background-color: red;*/

  align-self: center;

  margin: 0;

}

.flex-sub-container2 {

  /*background-color: yellow;*/

  display: flex;

  flex-direction: row;

  justify-content: center;

}

.flex-sub-item {

  background-color: green;

  display: flex;

  flex-direction: column;

  align-items: center;

  flex-grow: 1;

}

.flex-qty {

  margin: 0;

  font-size: 28pt;

}

.flex-qty-label {

  margin: 0 5pt 5pt 5pt;

}

.flex-center {

  background-color: royalblue;

  align-self: center;

  font-size: 15pt;

  flex-grow: 3;

}

<div class="flex-container card-panel teal lighten-2">
  <div>
    <div class="flex-sub-container">
      <p class="flex-item-left-corner">Left Top</p>
      <p class="flex-item-right-corner">Right Top</p>
    </div>
  </div>
  <div>
    <div class="flex-sub-container2">
      <div class="flex-sub-item">
        <p class="flex-qty">7</p>
        <p class="flex-qty-label">Label</p>
      </div>
      <p class="flex-center">This is my very long center text.</p>
    </div>
  </div>
  <p class="flex-bottom-middle">Bottom Middle</p>
</div>

<div class="flex-container card-panel teal lighten-2">
  <div>
    <div class="flex-sub-container">
      <p class="flex-item-left-corner">Left Top</p>
      <p class="flex-item-right-corner">Right Top</p>
    </div>
  </div>
  <div>
    <div class="flex-sub-container2">
      <div class="flex-sub-item">
        <p class="flex-qty">7</p>
        <p class="flex-qty-label">Label</p>
      </div>
      <p class="flex-center">This is my very long center text.</p>
    </div>
  </div>
  <p class="flex-bottom-middle">Bottom Middle</p>
</div>

解决方案

Would like spacing between green box and blue box. Tried to use "space-around" but it does not seem to do what I want.

Just added some margin between them. The spaceoptions only work if there is actual space there...i.e. the sum of the child widths is less than the parent width.

I also would like the containers to be the same size but not sure how to do that so it would be responsive.

Would like the text in the center to actually be center of itself as well not just the "p" tag.

Wrapped the p in div which makes the two divs equal height and then centered the text as usual

Would like to have it on bigger screens that more than one container fits on a line. Not sure if I need to wrap another flex container around it.

As you said, you can add a flex-container (with wrapping) but you would still need to add media queries as relevant.

Spacing between the root containers.

Just margin-bottom

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  padding: 0;
  margin-bottom: 1em;
}
.flex-sub-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex-item-left-corner {
  /*background-color: red;*/
  margin: 0;
  padding: 0;
}
.flex-item-right-corner {
  /*background-color: red;*/
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
.flex-bottom-middle {
  /*background-color: red;*/
  align-self: center;
  margin: 0;
}
.flex-sub-container2 {
  /*background-color: yellow;*/
  display: flex;
  justify-content: center;
}
.flex-sub-item {
  background-color: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
.flex-qty {
  margin: 0;
  font-size: 28pt;
}
.flex-qty-label {
  margin: 0 5pt 5pt 5pt;
}
.flex-center {
  background-color: royalblue;
  font-size: 15pt;
  flex: 3;
  margin-left: 2em;
  text-align: center;
}

<div class="flex-container card-panel teal lighten-2">
  <div>
    <div class="flex-sub-container">
      <p class="flex-item-left-corner">Left Top</p>
      <p class="flex-item-right-corner">Right Top</p>
    </div>
  </div>
  <div>
    <div class="flex-sub-container2">
      <div class="flex-sub-item">
        <p class="flex-qty">7</p>
        <p class="flex-qty-label">Label</p>
      </div>
      <div class="flex-center">
        <p>This is my very long center text.</p>
      </div>
    </div>
  </div>
  <p class="flex-bottom-middle">Bottom Middle</p>
</div>

<div class="flex-container card-panel teal lighten-2">
  <div>
    <div class="flex-sub-container">
      <p class="flex-item-left-corner">Left Top</p>
      <p class="flex-item-right-corner">Right Top</p>
    </div>
  </div>
  <div>

    <div class="flex-sub-container2">

      <div class="flex-sub-item">
        <p class="flex-qty">7</p>
        <p class="flex-qty-label">Label</p>
      </div>
      <div class="flex-center">
        <p>This is my very long center text.</p>
      </div>
    </div>

  </div>
  <p class="flex-bottom-middle">Bottom Middle</p>
</div>

这篇关于Flexbox有一些布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！