Возможно ли, чтобы первый элемент в списке на основе столбцов flexbox был равен 100%, а остальные - нет?

#html #css #layout #flexbox

#HTML #css — код #планировка #гибкий ящик

Вопрос:

Я думаю, что нет, но интересно, может ли у кого-нибудь еще быть решение.

Вот что я получаю сейчас, используя свой макет flexbox на основе столбцов:

Но на самом деле я хочу вот чего:

Возможно?

Моя разметка — это простой UL с LI. У меня есть flexbox, установленный на ul, и опция компоновки на основе столбцов, и я указываю высоту так, чтобы она поворачивалась вправо. Я использую макет flexbox Bootstrap 4 для столбцов в отдельных LI. Как вы можете себе представить, если я укажу, что первый элемент имеет ширину 100%, то все прямые li, которые соответствуют указанной высоте, также будут равны 100%.

Мысли? Заранее спасибо!

Ответ №1:

Если вы установите отступ на ul и дадите первый элемент position: absolute , который вы получите, будет ли это вариантом для вас?

 ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  list-style-type: none;
  height: 100px;
  padding: 20px 0 0 0;
}
ul li {
  border: 1px solid black
}
ul li:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
}

 <ul>

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

  <li>6
  </li>
  <li>7
  </li>
  <li>8
  </li>
  <li>9
  </li>
  <li>10
  </li>

  <li>11
  </li>
  <li>12
  </li>
  <li>13
  </li>
  <li>14
  </li>
  <li>15
  </li>

</ul>

Ответ №2:

 .wrapper, html, body {
    height:100%;
    margin:0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    padding: 10px;
}
#row2 {
    padding: 10px;
}
#row3 {
    flex:2;
    display: flex;
}
#col1 {
    flex :0 0 240px;
    padding: 10px;
}
#col2 {
    padding: 10px;
    flex: 1 1;
}
#col3 {
    padding: 10px;
    flex: 0 0 240px;
}

ul.menu {
  list-style: none;
}

 <div class="wrapper">
    <div id="row1">Menu</div>
    <div id="row2">
      <h1>Care amp; Service Center</h1>
    </div>
    <div id="row3">
      <div id="col1">
        <ul class="menu">
          <li>Col1 - Row 1</li>
          <li>Col1 - Row 2</li>
          <li>Col1 - Row 3</li>
          <li>Col1 - Row 4</li>
        </ul>
      </div>
      <div id="col2">
        <ul class="menu">
          <li>Col2 - Row 1</li>
          <li>Col2 - Row 2</li>
          <li>Col2 - Row 3</li>
          <li>Col2 - Row 4</li>
        </ul>
      </div>
      <div id="col3">
        <ul class="menu">
          <li>Col3 - Row 1</li>
          <li>Col3 - Row 2</li>
          <li>Col3 - Row 3</li>
          <li>Col3 - Row 4</li>
        </ul>
      </div>
    </div>
</div>

1. Спасибо за предложение @edmar-miyake, но, к сожалению, мне нужен ul, который не может иметь измененную разметку.

2. @DavidPanzarella Вы все равно можете иметь ul в каждом столбце div. Проверьте мое редактирование.

3. хотя это верно для данного примера, это неверно для моего варианта использования, поскольку мне нужен простой ul с вложенными ul для мобильной реализации. Конечно, я могу добавить больше разметки, но в моем случае это усложняет работу с мобильными устройствами.