Понимание Flexbox для отзывчивого дизайна

flexbox верстка считается одной из интересных. flexbox выравнивание, сетка, блоки, свойства, макеты и меню, все это есть в данном курсе. Качаем и учимся.

Курс HTML5, CSS3, FlexBox верстка можно скачать в конце статьи

flexbox шпаргалка

Многие разработчики знакомы с трюками с flexbox css, floats и clearfix CSS для создания разноцветных макетов. Эти трюки по-прежнему используются, так как они работают и имеют большую поддержку среди бесконечных браузеров. Однако в 2009 году на карте появился новый стиль отображения под названием flex.

С тех пор flex претерпел несколько изменений, пока не достиг своей текущей итерации. Значение flex является альтернативой для блокировки плавающих и управляемых элементов с использованием media-queries.

Из-за этого разработчики могут создавать гибкие контейнеры, то есть Flexbox, для краткости. Он отлично подходит для мобильных экранов и отзывчивого контента для динамических веб-дизайнов и приложений. Это руководство охватывает основы использования Flexbox CSS и некоторые полезные ресурсы, чтобы углубиться в тему.

flexbox блоки и что такое гибкий контейнер?

Макет с гибкими контейнерами и flex прижать к правому краю
– это способ использования свойства CSS display совершенно по-новому. Элементы block складываются вертикально, в то время как встроенные элементы складываются горизонтально (пока они не разбиваются на новую строку).

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

Любой элемент, на который ссылаются как Flexbox, является элементом-контейнером. Этот контейнер будет содержать элементы внутри, известные как items FlexBox. Если вы хотите получить более подробную информацию об этом, я рекомендую вам прочитать первую часть этой статьи Mozilla Dev.

Контейнер display flex может иметь фиксированную или жидкую ширину, но лучше всего оставить его как жидкий, чтобы содержимое соответствовало странице. Внутренние элементы не будут иметь определенных значений ширины, вместо этого они будут отображаться на основе пропорций. Вы можете использовать свойство CSS lamada flex для определения радиуса между контейнерами (в основном HTML divs). Flex: 1 представляет радиус 1: 1, где каждый внутренний элемент flex отображается с одинаковой шириной в зависимости от разрешения экрана.

Как сделать карточки на flexbox

Когда Flexbox вышел на сцену, мой крик радости услышали во всем мире; у нас наконец-то был модуль, чтобы решить все наши разочарования в диаграмме. Но это был не нынешний случай. Флексбокс лучше всего работает, распределяя элементы вдоль оси; либо горизонтально вдоль строки, либо вертикально, как столбец. Создание настоящей адаптивной сетки с помощью Flexbox сложно.

Сетка flexbox, однако,предназначена для размещения элементов по двум осям горизонтально и вертикально. В этом уроке мы будем использовать каждый из них для той цели, с которой он был разработан, что дает нам очень твердое решение. Давайте начнем!

Вдохновение

bbc.co.uk недавно он дебютировал (в бета-версии)своей последней итерации. Он выглядит чистым и просторным с этим дизайном на основе карт. Игнорируя жалкие заголовки, это выглядит очень хорошо.

Как сделать карточки на Флексбокс

Первые карты построены и выровнены по строке с помощью Flexbox, но мы собираемся расширить макет с помощью Grid.

flexbox grid

Примечание: вам понадобится браузер, который поддерживает Grid.

браузер, который поддерживает Grid

Adobe photoshop cs6 extended скачать торрент

Структура нашей карты

Давайте начнем с контейнера для нашей сетки<div class="band">, некоторых элементов сетки, дабы организовать все<div class="item">это, и нескольких анкеров (каждый из них будет картой):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="band">
<!-- grid item, containing a card -->
<div class="item-1">
<a href="" class="card">
<div class="thumb"></div>
<article>
<h1>Post title</h1>
<span>Author</span>
</article>
</a>
</div>
<!-- grid item, containing a card -->
<div class="item-2">
...
</div>
<!-- grid item, containing a card -->
<div class="item-3">
...
</div>
</div>

Поместите столько карт, сколько вы хотите; мы используем семь. Каждый из них имеет миниатюру<div class="thumb">, к которой мы позже применим фоновое изображение. После этого у нас есть один<article>, который, в свою очередь, содержит один<h1>, один<span>для автора и, возможно, даже один<p>для размещения дополнительной информации.

Основы сетки flexbox css

Теперь давайте запустим некоторые стили, которые фиксируют каждый из этих элементов в виде сетки.

Давайте начнем здесь с мобильной версии, поэтому первые стили дадут нашему контейнеру ширину и центрируют его, а затем установим некоторые правила Grid:

01
02
03
04
05
06
07
08
09
10
11
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}

Самое главное, здесь мы назначаем наш элемент.bandС.display:grid;Затем мы объявляемgrid-template-columnsот1fr, указывая, каждый столбец будет иметь только часть доступных. Мы объявили только один на данный момент, каждый столбец заполняет всю ширину.

Потом мы сделали grid-template-rows: auto;. Это действительно значение по умолчанию, поэтому мы могли бы пропустить его, и это означает, высота столбцов будет определяться исключительно содержимым.

Наконец, мы определяемgrid-gap20pxЭд, дает нам дополнительное / среднее пространство между соответствующими полями столбцов и строк.

Media Query номер один

Расстояние между flex элементами. На более широких окнах / экранах (значение 500px полностью произвольно) мы изменимgrid-template-columns, дабы вы предоставили нам две карты в строке. Теперь у нас есть два столбца, каждый из которых имеет ширину, равную одной из двух фракций, которые у нас есть в общей сложности.

1
2
3
4
5
@media only screen and ( min-width : 500px ) {
.band {
grid-template-columns: 1 fr 1 fr;
}

Media Query номер два

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

1
2
3
4
5
@media only screen and ( min-width : 850px ) {
.band {
grid-template-columns: 1 fr 1 fr 1 fr 1 fr;
}
}

Здесь мы могли бы также написатьrepeate (4, 1fr)вместо1fr 1fr 1fr 1fr.

flexbox верстка

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

Flexbox использует свойство flex, которое является коротким для нескольких параметров конфигурации. Как мы уже говорили ранее, свойство flex – это объединение трех различных свойств: flex-grow, flex-shrink и flex-basis.

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

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

HTML

<h1>The Fortean World Times</h1>
<section>
<article class="breaking">
 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/earth-vs-the-flying-saucers.jpg" alt="Photograph of a flying saucer over the US Capitol building">
 <h1>Washington D.C. Attacked By Flying Saucers</h1>
 <h2>Dateline Washington D.C.</h2>
 <h3>Frank Bragg reporting</h3>
 <p>The country was brought to a standstill today when flying saucers – presumably from Mars, although Venusians have also been suspected – appeared over the nation’s capital, intent on destruction. Curiously, they only attacked Pennsylvania Avenue, and have not appeared elsewhere in the country.
 </article>
 <article>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bigfoot_1.jpg" alt="Photograph of a Bigfoot">
<h1>Bigfoot Found, Shot, Killed</h1>
<h2>Dateline Washington State</h2> <h3>Jessica Walsh reporting</h3>
<p>The first conclusive proof of the elusive Sasquatch was found today, when one of the ape-men was found and killed by a hunter in the north-eastern corner of the state.
<p>The hunter plans to tour the pelt in the fall.
</article>
<article>
 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/alligator-sewer_1.jpg" alt="Photograph of an alligator emerging from an open manhole cover">
<h1>Nest of Alligators Found in New York Sewers</h1>
<h2>Dateline New York City</h2>
<h3>Ted Sturgis reporting</h3>
<p>Years of rumours were confirmed yesterday when a nest of alligators were found in the sewers of New York City, just south of Times Square. The largest, which locals have dubbed “Mugsy”, measures over 21 feet long.
</article>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(http://fonts.googleapis.com/css?family=Merriweather);
@font-face {
font-family:'Queens Park';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/queens-park.woff') format('woff');
font-style: normal;
font-weight:400;}
section { display: flex;}
body > h1 { 
font-family:QueensPark, serif;
font-size:4rem;
text-align: center;}
article { 
margin:1rem;-ms-flex:100px;
flex:1;/* shortcut for "flex-grow: 1". Note that it MUST be a unitless value to work; defined with a unit (e.g. flex: 1px) the shortcut would alter the flex-basis property. * / } 
article .breaking {-ms-flex-grow:2; 
flex:2;/* shortcut for "flex-grow: 2" */} 
 
article img { 
width:100%; height:auto;}
article h1, article h2, article h3 { font-family:Oswald, serif;}
article h1 { 
font-size:2rem; 
line-height:1.3;}
article h2, article h3 { 
font-size:1.2rem; 
text-align: right; 
line-height:1.3;
margin:.3rem0;
font-weight:300;}
article h3 { 
font-size:1.1rem;}
article p { 
font-family:Merriweather;
line-height:1.6;}
@media screen and(max-width:750px){
body > h1 { font-size:3rem;}
section {-ms-flex-direction: column;-webkit-box-orient: vertical;
flex-direction: column;}}

Скачать курс HTML5, CSS3, FlexBox верстка сайтов с нуля
 О курсе: https://www.udemy.com/course/html5-css3-flexbox-2020/

Единственным свойством flex, которое принимает диски, является flex-basis. Этот необязательный параметр определяет размер внутренних элементов по умолчанию (ширина, если row, высота, если column). По умолчанию он установлен на 0, но вы можете установить его на что хотите.

5 2 голоса
Рейтинг статьи

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x