关于html：Flex：如何右对齐以package为中心的项目


Flex: how to right align an item which centers on wrap

我想在有足够空间但在package纸上居中的情况下左对齐两项，而右对齐一项。

第一次包裹时(太薄，无法放入合适的物品)

  • 正确的项目应转到下一行并居中
  • 其余部分保持对齐

在第二个包裹上(太薄，无法容纳右边的中间物品)

  • 所有三个项目都垂直堆叠并居中

尝试使用两端对齐的内容来包含两层柔韧性：第一层之间有空格，第二层之间有中心。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.subcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  border: 1px solid black;
  height: 100px;
}
1
2
3
4
    abc abc abc abc abc abc
    def def def def def def
 
  right right right

http://jsfiddle.net/b3z18rLn/9/

不幸的是，正确的项目在package时不会居中，并保持左对齐。

相关讨论

JSFiddle

您可以将第三个项目package在另一个Flexbox容器中，并使用媒体查询：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* flex-wrap will put right-subcontainer on a new row when you
   decrease the viewport's width.*/
.container {
    display: flex;
    flex-wrap: wrap;
}

/* flex-grow of 1 will enable this container to take up the
   entire row when the left and right subcontainers are
   row by row.
   
   flex-wrap is used to allow the second item to go onto a
   new row at smaller widths. */
.left-subcontainer {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}

/* Again, flex-wrap is used to give the right subcontainer
   the ability to take up the entire row.
   
   flex-end changes the items from positioning left-to-right
   to right-to-left.*/
.right-subcontainer {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.item {
    border: 1px solid black;
    width: 300px;
    height: 300px;
}

/* You will need to adjust the arguments for these media queries.
   Also, if you do decide to use media queries for this approach,
   I would suggest reversing the CSS logic by having the CSS
   selectors tackle mobile design first and use media queries
   to tackle design at larger screen sizes. */
   
/* The first wrap/breakpoint is at this width. I am telling the
   right container to be center-aligned at the first breakpoint. */
@media only screen and (max-width: 925px) {
  .right-subcontainer {
    justify-content: center;
  }
}

/* Then, I tell the left container to be center-aligned at the second
   breakpoint. */
@media only screen and (max-width: 1320px) {
  .left-subcontainer {
    justify-content: center;
  }
}
1
2
3
4
5
6
      abc abc abc abc abc abc
      def def def def def def
   

   
      right right right

相关讨论