当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Block grid starting from right bottom corner

问题描述:

I'm looking for a nice CSS way to get an unordered list to always end in the bottom right corner. For example:

 || 1 || 2

3 || 4 || 5

In a normal block-grid i'm using floating list-items. I have been looking at flexbox for a solution but haven't come up with anything satisfying.

Adding one item to this list would produce a list like this:

 1 || 2 || 3

4 || 5 || 6

Another one would be

 || || 1

2 || 3 || 4

5 || 6 || 7

网友答案:

You can use flexbox with flex-wrap: wrap-reverse and flex-direction: row-reverse. You can add as many additional children elements as you want. (note: I left the container height at the default)

  * {
  box-sizing: border-box;
  }
  .x {
    width: 302px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    border: 1px solid red;
    flex-grow: 0;
    flex-basis: 0%;
  }
  .y {
    width: 100px;
    height: 100px;
    border: 1px solid green;
  }
<div class="x">
  <div class="y">1</div>
  <div class="y">2</div>
  <div class="y">3</div>
  <div class="y">4</div>
  <div class="y">5</div>
</div>
网友答案:

You can do 'floats' in flexbox with usage of the margin.

If you want to float it to the right:

margin-left: auto;

Is this what you been looking for? Or am i getting it wrong: http://codepen.io/powaznypowazny/pen/ZLdBxa

网友答案:

This solution doesn't require children to have hard-coded dimensions. It also allows setting a min-height on parent without children automatically growing to fill the entire space vertically. They will just stack in the bottom right corner, according to their height.

It's the closest thing to having a float:right starting from the bottom corner, in reverse order.

parent {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  min-height: 100vh;          /* desired height */
  align-items: flex-end;
  align-content: flex-start;
}
child {
  flex: 1 0 33.3333%;
  max-width: 33.3333%;

  /* below mostly styling, not part of the layout solution */
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid white;
  background-color: #eee;
}

body {margin: 0;}
<parent>
    <child> 1 </child>
    <child> 2 </child>
    <child> 3 </child>
    <child> 4 </child>
    <child> 5 </child>
  </parent>
分享给朋友:
您可能感兴趣的文章:
随机阅读: