相关疑难解决方法(0)

我正在尝试创建一个包含两列的标题，这些标题将填充到父容器的高度。我正在使用display:flex响应式布局。当我将标题设置为固定高度时，其他两个子div与标题之间存在间隙。

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
    flex-flow:row wrap;
    height:540px;
}
.header{width:100%; height:40px; background:#ccc;}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

小提琴

编辑

The duplicate question is a nice description of the flex properties, but I'm not seeing an example like this addressed in it. If the height:40px is removed from the header, the header div will stretch down to the other divs. When the header height is specified, a gap exists.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
  <div class="card bg-dark text-white">
    <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
    <div class="card-img-overlay">
      <h5 class="card-title">Title</h5>
      <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
      <div class="align-self-end">Text I want at bottom</div>
    </div>
  </div>
</div>

我无法通过将此类应用于align-self-end图像底部来获取最后一个 div 中的文本。我知道 flex 已经以.card-img-overlay列的方向应用于div 那么为什么我无法将 div 放到图像的底部？

我正在尝试使用align-content：center将div与flexbox垂直对齐。它在 Firefox 和 IE 中工作正常，但在 Chrome 中不能垂直对齐。在 Chrome 中，div 保持在顶部。

<div class="products-wrapper">
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
</div>

和CSS：

.products-wrapper {
    width: 100%;
    min-height: 100vh;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.product {
    max-width: 250px;
    padding: 10px;
}

.product img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 250px;
} …

我正在使用"milligram.css"(微型CSS框架).

我想将列内的DIV对齐到底部.

但没有任何反应,DIV总是排在最前面.

https://jsfiddle.net/fb8ydfcy/3/

.column {
  border: 1px solid red;
}

.col-bottom {
  border: 3px solid blue;
}


/*!
 * Milligram v1.1.0
 * http://milligram.github.io
 *
 * Copyright (c) 2016 CJ Patoilo
 * Licensed under the MIT license
*/

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  color: #606c76;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

blockquote {
  border-left: 0.3rem solid #d1d1d1; …

现在我想要的是.q-order-item-info位于左侧，.q-order-item-quantity位于右侧，但不知何故它不会发生，所以我应该做什么这行得通？

我的代码如下所示：

xyz.scss

.order-container {
    height: 100vh;
    width: 100vw;
    overflow-y: none;
    float: left;
    background-color: #f3f3f3;
    .q-background {
        float: left;
        width: 100%;
        height: 14.3vw;
        background: url("../../image/i-header-list.jpg") no-repeat;
        background-size: contain;
    }
    .q-text {
        position: relative;
        top: 2rem;
        font-size: 2rem;
        text-align: center;
    }
    .q-order-container {
        width: 100%;
        position: relative;
        padding-top: 20px;
        top: 2rem;
        height: 80%;
        .q-orders-div {
            position: relative;
            margin-left: 5rem;
            float: left;
            overflow: auto;
            width: 50%;
            height: 70%;
            background-color: #f3f3f3;
            .orders-tile {
                width: 90%;
                height: 20%;
                position: relative; …

我在flexbox中同时使用了justify-content和align内容。他们有什么区别？？？？

使用弹性容器和flex-wrap: wrap设置,您可以使用溢出的项目与中心对齐justify-content: center.

有没有办法使用CSS网格实现相同的行为溢出网格项？

我创建了一支显示所需弹性行为的笔

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

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div> …

当只有一行“弹性项目”时，Chrome和Firefox显示不同的结果。当有多行（换行）时，Chrome和Firefox显示相同的结果！

那么为什么会这样呢？那是一个错误，还是我缺少一些“默认值”或差异？

body{
    background-color: teal;
}

.flexContainer{
    background-color: blue;
    border: 1px solid black;
    height: 300px;
}
.flexItem{
    background-color: red;
    border: 1px solid black;
}

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

.flexItem{ 
    flex: 0 1 0; 
}

<div class="flexContainer">
    <div class="flexItem">1111111111111111111</div>
    <div class="flexItem">2222<br/>2222</div>
    <div class="flexItem">3333<br/>3333<br/>3333</div>
    <div class="flexItem">4444444444444444444</div>
</div>

我有HTML结构,如:

<div class="container">
  <div class="btn-1"></div>
  <div class="btn-2"></div>
  <div class="btn-3"></div>

  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
  </div>
</div>

• btn-1应与左上角对齐,所有其他按钮(btn-2,btn-3 ...)应与右上角对齐.
• 所有这些按钮后的文本应为100%宽度.

快速模型:

我想出了第一部分(按钮):

.container {
  display: flex;
  justify-content: flex-end;
}
.btn-1 {
  /* align first button to the left */
  margin-right: auto;
}

不管我做什么,文字都没有流到下一行......

这是我的JSFiddle https://jsfiddle.net/an0o7taq/

谢谢你的帮助!

如何使用flex在avatar下集中这个跨度？

如果我删除跨度,则头像图像很好地集中,但是当我插入跨度时,即使display:block它显示在右侧也是如此.

这是我的HTML:

<ion-navbar *navbar>
    <ion-avatar item-center>
        <img src="img/bill-gates-avatar.jpg">
        <span>Bill Gates</span>
    </ion-avatar>
</ion-navbar>
<ion-content padding>
    Content here...
</ion-content>

那是我的SCSS:

.tabs {

    ion-navbar-section {
        min-height: 16.6rem;
    }

    .toolbar {
        min-height: 170px;
    }

    ion-avatar {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    ion-avatar img {
        max-width: 8rem;
        max-height: 8rem;
        border-radius: 5rem;
        border: 2px solid color($colors, light);
    }
}