Как прижать элемент к низу блока css flex

Лучший способ прижать футер используя flexbox

При разработке веб-сайтов в какой-то момент, вероятно, можно столкнуться с такой задачей как прижатие футера к низу страницы, в этой статье мы разберем как это сделать, используя flexbox.

Этот явно «сломанный» макет происходит, когда футер расположен статически в конце тела, но на странице нет большого количества контента. Нет никакой визуальной информации, чтобы можно было в CSS прижать футер, и он остается посередине экрана, оставляя перед собой огромную область пробелов.

В этом кратком учебном пособии мы рассмотрим современный метод построения футеров, как в CSS прижать футер, чтобы он всегда придерживался самого низа страницы.

Разберем наш способ

Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.

Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.

Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.

После этого нужно настроить, какое количество места займет каждый раздел. Мы добились этого благодаря свойству flex , которое объединяет три гибких спецификации в одну:

• flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
• flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
• flex-basis — размер для элемента, установленный по умолчанию.

Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:

header < /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto; >.main-content < /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 1 0 auto; >footer< /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto; >

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

Подводим итоги и делаем выводы

Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».

Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!

Источник

Flex как прижать к низу элемент?

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

 
 
 
 
Мужские Кроссовки Nike Blazer Mid Suede Мужские Кроссовки Nike Blazer Mid Suede
 
 
Цена:
 
12 999 руб.
 
  
 
 
 

.card__wrapper < display: flex; column-gap: 10px; flex-wrap: wrap; justify-content: space-between; >.card__sneakers < border: 1px solid #F8F8F8; align-items: center; border-radius: 40px; margin-bottom: 50px; transition: .5s; &:hover < box-shadow: 0 14px 30px rgba(0, 0, 0, .05); transform: scale(1.1); >> .card__sneakers-svg-check < max-width: 32px; max-height: 32px; >.card__sneakers-svg-heart < max-width: 20px; max-height: 20px; >.card__sneakers-svg-heart < border: 3px solid #F8F8F8; stroke: #F8F8F8; border-radius: 7px; align-self: flex-start; justify-content: space-between; padding: 10px; opacity: .5; cursor: pointer; &:hover < background-color: palevioletred; >> .card__sneakers-body < max-width: 165px; padding: 22px; display: flex; flex-direction: column; >.card__sneakers-wrap-bottom < display: flex; justify-content: space-between; >.card__sneakers-text-price, .card__sneakers-number < margin: 0; >.card__sneakers-text-price < font-weight: 500; font-size: 11px; text-transform: uppercase; color: #BDBDBD; >.card__sneakers-number

Простой 4 комментария

Источник

Как прижать элемент к низу блока css flex

Pushing elements to the bottom of a container. This used to be a bit of a hassle before flexbox came along. You had to position the element absolutely, use negative placement, extra padding, and even after all that it all usually went wrong when the content was dynamic and not consistent. Luckily, CSS has improved and we now have flexbox.

You might be thinking as I did, “sure, we just use align-content: space-between on the container element.” That’ll work, but, what if you have more than one element in the container and you only want the last element to stick to the bottom?

Okay, so I thought, “maybe we just tell that last element to align-self: flex-end “, right? Well, turns out that flex-end on a flex column layout isn’t what I thought it’d be. If you make the elements smaller than the width of the flex column, you can see what CSS means by the “end” of the flex column. The end of a flex column is all the way to the right. It made sense to me when I thought about what would happen to .element-2 if it worked the other way around.

Okay, so, how does one make the last element stick to the bottom for a flex column layout? The magic is in margin-top: auto of course!

And sure, why not? We’ve been using margin: 0 auto; to magically center stuff horizontally since the ’70s (well, maybe not since the ’70s). In fact, now if the container has display flex, you can now use margin: auto 0; on a child element to center stuff vertically as well!

Источник

Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

Если вы в основном имеете дело с разработкой SPA, можете быть озадачены тем, почему эта проблема всё ещё существует, но до сих пор встречаются ситуации, когда при недостаточной высоте содержимого, футер также отрывается от нижнего края страницы, например на:

• страницах авторизации
• статьях блогов или новостей
• страницах списка товаров
• подробностях событий календаря

Существует два способа решить эту проблему с помощью современного CSS: Flexbox и Grid.

Ниже представлена демонстрация кода с использованием метода на основе Flexbox. Если перейти на страницу Codepen, можно поменять переменную $method на grid , чтобы увидеть альтернативное решение.

Описание каждого метода приведено ниже после демонстрации кода.

Метод с использованием Flexbox

Эффект достигается путём задания:

body < min-height: 100vh; display: flex; flex-direction: column; >footer < margin-top: auto; >/* Опционально */ main < margin: 0 auto; /* или: align-self: center */ max-width: 80ch; >

Как это работает

Во-первых, мы гарантируем, что благодаря свойству min-height: 100vh , высота элемента body будет равняться как минимум, высоте окна браузера. Это не приведёт к переполнению, если содержимого слишком мало (исключение – определённые мобильные браузеры), но если понадобится, позволит body увеличиться по высоте.

Установка свойства flex-direction: column задаёт поведение как у нормального потока документа в том плане, что блочные элементы занимают всё доступное место по всей ширине.

Преимуществом Flexbox является поведение при добавлении свойства margin: auto . Этот трюк приводит к тому, что внешние отступы элемента, к которому применено это свойство, забирают всё доступное пространство в указанном направлении (или во всех направлениях). Например, задание margin-top: auto оттолкнёт футер к нижней части экрана от расположенных выше элементов.

Проблема

В демонстрационном Codepen выше я добавила к элементу main свойство outline , чтобы продемонстрировать, что при использовании метода Flexbox, main не заполняет всю доступную высоту. Вот почему мы должны использовать именно трюк с margin-top: auto .

Вряд ли это будет иметь для вас большое значение, но если это так, посмотрите вариант с использованием Grid, который растягивает элемент main , заполняя всё доступное пространство.

Метод с использованием Grid

Эффект достигается путём задания:

Как это работает

В этом случае мы также используем свойство min-height: 100vh , но затем добавляем grid-template-rows для правильного расположения элементов.

Ключевым трюком этого метода является использование специальной Grid единицы измерения fr . Единица измерения fr означает «фракция / доля» и с её помощью браузер вычисляет «долю» пространства, доступную данному элементу в определённой колонке или строке. В нашем случае элемент заполнит всё доступное пространство между хедером и футером, что одновременно является решением «проблемы» из метода Flexbox.

Что лучше?

После ознакомления с методом, использующим Grid, вам могло показаться очевидным, что он лучше. Однако, если добавить больше элементов между хедером и футером, придётся менять стилизацию. Чтобы выйти из этой ситуации, следует убедиться, что данный элемент будет выполнять роль единственной обёртки и не будет влиять на потомков.

С другой стороны, метод с Flexbox может использоваться в различных шаблонах с множеством блочных элементов в средней секции – например, набор элементов <article> вместо одного <main> .

В итоге, как и в случае с другими технологиями, всё зависит от проекта. Но думаю, вы согласитесь с тем, что это удивительно – иметь в распоряжении все эти современные методики.

Источник

Keep footer at bottom of page — using flexbox

There’s a way using flexbox which works on device of every size, doesn’t require fixed height of navbar or footer, and works without any side-effects.

Reset browser defaults

If you are not using any css frameworks, you should reset some browser default css. Otherwise your browser will apply its own margin and padding to page.

 /* following style will be applied to every element */ *, *::before, *::after margin: 0; padding: 0; box-sizing: border-box; > /* write your own css after this part */ 

Structure of page

Your html body should follow this kind of structure. You can use instead of .

basically wrap all content of your page inside a div, give it some classname

Using flexbox

Add display:flex and flex-direction:column to you main div (which contains all other elements of page). You also need to make that div take full height of viewport. see below code:

 .pagewrap display: flex; /*vertically stack children*/ flex-direction: column; /* expand to take full height of page */ /* min-height overrides both height & max-height */ min-height: 100vh; > 

Now all you need to do is stretch the element to take as much height as possible. Use flex-grow to do this.

• Wrap all of your body elements inside a div.
• Give that div a display: flex, flex-direction: column and min-height: 100vh;
• Wrap elements other than navbar and footer inside a div/main tag.
• Give that div/main tag a flex-grow: 1;

That’s it! As you can see in above picture, it works even if you have less content or more content. You don’t have to worry about making it responsive.

Источник