相关疑难解决方法(0)

如何使Flex容器居中但左对齐flex项目

我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.

这是我的一个例子:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

Run Code Online (Sandbox Code Playgroud)

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/8jqbjese/2/

html css css3 flexbox

Eti*_*oël

2016 08-13

67
推荐指数

3
解决办法

3万
查看次数

CSS网格自动适应最大内容

我有4列.第1列和第4列的实际内容为150px,第2列为250px,第3列为370px.我希望在浏览器宽度更改时包装列.当我减小浏览器的宽度时,我希望每个列在包装之前缩小到它们的最小宽度.所以我想第4列会在宽度低于150px之后落到下一行,宽度为100%.

这就是我认为应该做的诀窍:

repeat(auto-fit, minmax(max-content, 1fr))

Run Code Online (Sandbox Code Playgroud)

有没有办法实现这一点,而不通过固定宽度'max-content'？

这是我使用媒体查询和硬宽度的解决方案

https://jsfiddle.net/9hjb5qv8/

这是我在上面的小提琴中使用的html/css:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 8px;
}

@media (max-width: 799px) {
  .container {
      grid-template-columns: minmax(max-content, 1fr);
  }
}

@media (min-width: 800px) {
  .container .p2,
  .container .p3 {
    grid-column: auto / span 2;
  }
}

.container > div {
  background-color: gray;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

css css-grid

Hec*_*orr

2018 10-12

11
推荐指数

2
解决办法

3736
查看次数