Блог

Недавно я использовал CSS grid для своих макетов, но сейчас я работаю над проектом, который все еще нуждается в поддержке IE11 .

Поскольку CSS grid, похоже, просто не имеет большой поддержки, и поскольку проект уже использует Bootstrap css, я пытаюсь сделать то, что, как я думал, было бы простым макетом с его использованием.

Макет, который я пытаюсь скопировать с помощью Bootstrap, как это было бы сделано с помощью css grid , можно увидеть на этой скрипке

Итак, у нас есть простой двухстрочный макет со строкой нижнего колонтитула

  //html
 <div class='container'>    
        <div class='item1'>
                aaaaaaaa
        </div>
        
        <div class='item2'>
            bbbbbbbbbb        
        </div>
 </div>


//css
html, body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
}

.container {
        min-height: 100%;
        display: grid;
        grid-template-rows: 1fr 50px;
        grid-template-columns: 100%;
}

.item1 {    
        background: pink;
        color: #444;
}

.item2 {    
        background: yellow;
 }
  

Итак, мы получаем..

Сейчас я пытаюсь сделать то же самое, используя Bootstrap , чтобы это работало в IE .

Мое первое замешательство, похоже, что есть flex и grid, поэтому я не уверен, какую использовать, и почему существуют две системы.

Я пробовал каждый из них, и я просто не могу заставить работать одно и то же.

Используя grid, он говорит иметь container , а затем добавлять rows (позволяет не беспокоиться о столбцах)

Поэтому я добавил

     <div class='cc container'>    
        <div class="item1 row align-items-stretch">
                aaaaaaaa
        </div>
        
        <div class="item2 row align-items-end">
            bbbbbbbbbb        
        </div>
 </div>
 
 
 html, body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
}

.cc {
    height: 100vh;
    background: blue;
}
.item1 {
        background: pink;    
}

.item2 {    
        background: yellow;
 }
  

Также это можно увидеть здесь.

Я просто не могу заставить нижний колонтитул располагаться внизу. align-items-end Кажется, ничего не делает.

Я просто вижу

Я пробовал аналогичные вещи с flex , ie

 <div class="d-flex align-self-end">Aligned flex item</div>
<div class="d-flex align-self-baseline">Aligned flex item</div>
  

но и здесь не повезло.

Я потратил часы, но я просто не могу заставить это работать (даже в Chrome). Все, о чем говорится в doco, — это разметка столбцов, но мне нужны строки.

Второстепенный вопрос заключается в том, почему существуют grid и flex, но мой главный вопрос заключается в том, должен ли я использовать Bootstrap grid, flex или их комбинацию, чтобы попытаться получить это «вертикальное» выравнивание (возможно ли это)?

Используя flex layout, присвойте вашему параметру .item1 значение flex 1

 .item1 {
    flex: 1;
}
  

Это заставит этот элемент занять все оставшееся пространство и переместить нижний колонтитул в самый низ.