Блог

Главная - Вопросы по программированию - Как заставить вложенный css flex иметь правильную ширину после переноса в этой настройке?

Как заставить вложенный css flex иметь правильную ширину после переноса в этой настройке?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть этот макет, есть несколько вложенных контейнеров. некоторые классы ссылок имеют несколько элементов (par и ref), и я хочу, чтобы они отображались рядом друг с другом, если есть свободное место, но быстро перемещают их друг под другом, когда общая ширина становится меньше.

Это работает несколько, но я ожидаю (хочу), чтобы элемент ссылки, содержащий два дочерних элемента, возвращался к той же ширине, что и элемент ссылки с одним единственным дочерним элементом при переносе.

По какой-то причине он остается шире, чем одноплодные.

Любые подсказки приветствуются!

Код:

 let name = 'world'; 
 :global(body) {
  margin: 0;
  padding: 0
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: gray;
}

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: lightblue;
  padding: 3px
}

.linkContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: salmon;
}

.par {
  width: 80vw;
  max-width: 300px;
  background-color: red
}

.links {
  display: flex;
  flex-flow: row wrap;
  padding: 3px;
  background-color: orange
}

.ref {
  background-color: olive;
  width: 30vw;
  max-width: 100px
}

.item {
  width: 80vw;
  max-width: 300px;
  background-color: steelblue
} 
 <div class="main">
  <div class="Container">
    <div class="item">
      header
    </div>
    <div class="linkContainer">
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="Container">
        <div class="item">
          another header
        </div>
        <div class="linkContainer">
          <div class="links">
            <div class="par">
              some text
            </div>
            <div class="ref">
              a ref
            </div>
          </div>
          <div class="links">
            <div class="par">
              some text
            </div>
          </div>
          <div class="links">
            <div class="par">
              some text
            </div>
            <div class="ref">
              a ref
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №1:

вы могли бы просто добавить a max-width:300px; в .links и иметь размер блока, но тогда вы не смогли бы получить желаемый эффект стекирования, который вы хотели, поэтому я пошел немного дальше и с помощью переменных css и медиа-запросов и добавления класса .single в single .par s, у которого не было a .ref после них, я придумал это:

 :root {
  --ref-size: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: gray;
}

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: lightblue;
  padding: 3px
}

.links {
  min-width: 300px;
  display: flex;
  flex-flow: row wrap;
  padding: 3px;
  background-color: orange;
}

.par {
  width: calc(100% - var(--ref-size));
  background-color: red;
}

.ref {
  background-color: olive;
  width: var(--ref-size);
}

.item {
  width: 80vw;
  max-width: 300px;
  background-color: steelblue
}
@media all and (max-width:300px){
  .par{
    width: 100%;
  }
}
@media all and (min-width: 300px){
  .par.single{
    width: 100%;
  }
} 
 <div class="main">
  <div class="Container">
    <div class="item links">
      header
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="item links">
      another header
    </div>
    <div class="links">
      <div class="par">
        some text
      </div>
      <div class="ref">
        a ref
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par">
        some text
      </div>
      <div class="ref">
        a ref
      </div>
    </div>
  </div>
</div>