Адаптивный список на flex — 2
29.03.2019
887
Один из элементов списка на flexДрузья, привет! Первый вариант списка не flex можно посмотреть в этой статье и в этом демо-примере. Отличия второго варианта:
- другой фон
- больше текста
- background у каждого элемента списка
- большая иконка FontAwesome
- медиа-запросы для ширины иконки на разных экранах
- текст и иконка выравниваются по центру
- добавлен оборачивающий div, чтобы растянуть фон по всей высоте и вместить весь список.
Напомню, что до появления flex-ов, верстальщики использовали свойство float для позиционирования блоков сайта. Верстку с помощью table вспоминать не будем, а ведь именно в таблицах начинала делать первые шаги, других вариантов не было.
Флексы дают больше возможностей манипулирования элементами.
Добавила комментарии в код. Для IE11 нужно задавать ширину псевдоэлемента :before, иначе отступ от иконки справа не получается.
Список адаптивен, выстраивается в одну колонку на мобильных.
HTML-код страницы:
<!DOCTYPE html>
<html lang="ru_Ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Adaptive flex list - 2</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<h1>Планеты Cолнечной системы</h1>
<div class="list">
<ul>
<li>Меркурий (0,4 а. е. от Солнца) является ближайшей планетой к Солнцу и наименьшей планетой системы (0,055 массы Земли). У планеты нет спутников. Характерными деталями рельефа его поверхности, помимо ударных кратеров, являются многочисленные лопастевидные уступы, простирающиеся на сотни километров. Считается, что они возникли в результате приливных деформаций на раннем этапе истории планеты во время, когда периоды обращения Меркурия вокруг оси и вокруг Солнца не вошли в резонанс (1)</li>
<li>Венера близка по размеру к Земле (0,815 земной массы) и, как и Земля, имеет толстую силикатную оболочку вокруг железного ядра и атмосферу (из-за этого Венеру нередко называют «сестрой» Земли). Имеются также свидетельства её внутренней геологической активности. Однако количество воды на Венере гораздо меньше земного, а её атмосфера в девяносто раз плотнее. У Венеры нет спутников. Это самая горячая планета нашей системы, температура её поверхности превышает 400 °C (2)</li>
<li>Земля является крупнейшей и самой плотной из планет земной группы. У Земли наблюдается тектоника плит. Вопрос о наличии жизни где-либо, кроме Земли, остаётся открытым. <br>А для меня вопрос давно закрыт - жизнь во Вселенной просто кишит )) (3)</li>
<li>Марс меньше Земли и Венеры (0,107 массы Земли). Он обладает атмосферой, состоящей главным образом из углекислого газа, с поверхностным давлением 6,1 мбар (0,6 % от земного). На его поверхности есть вулканы, самый большой из которых, Олимп, превышает размерами все земные вулканы, достигая высоты 21,2 км. Рифтовые впадины (долины Маринер) наряду с вулканами свидетельствуют о былой геологической активности, которая, по некоторым данным, продолжалась даже в течение последних 2 млн лет (4)</li>
<li>Юпитер обладает массой в 318 раз больше земной, и в 2,5 раза массивнее всех остальных планет, вместе взятых. Он состоит главным образом из водорода и гелия. Высокая внутренняя температура Юпитера вызывает множество полупостоянных вихревых структур в его атмосфере, таких как полосы облаков и Большое красное пятно (5)</li>
<li>Сатурн, известный своей обширной системой колец, имеет несколько схожие с Юпитером структуру атмосферы и магнитосферы. Хотя объём Сатурна составляет 60 % юпитерианского, масса (95 масс Земли) — меньше трети юпитерианской; таким образом, Сатурн — наименее плотная планета Солнечной системы (его средняя плотность меньше плотности воды) (6)</li>
<li>Уран с массой в 14 раз больше, чем у Земли, является самой лёгкой из планет-гигантов. Уникальным среди других планет его делает то, что он вращается «лёжа на боку»: наклон оси его вращения к плоскости эклиптики равен примерно 98°. Если другие планеты можно сравнить с вращающимися волчками, то Уран больше похож на катящийся шар. Он имеет намного более холодное ядро, чем другие газовые гиганты, и излучает в космос очень мало тепла (7)</li>
<li>Нептун, хотя и немного меньше Урана, более массивен (17 масс Земли) и поэтому более плотный. Он излучает больше внутреннего тепла, но не так много, как Юпитер или Сатурн. У Нептуна имеется 14 известных спутников. Крупнейший — Тритон, является геологически активным, с гейзерами жидкого азота (8)</li>
</ul>
<p>20 января 2016 года астрономы из Калифорнийского технологического института Константин Батыгин и Майкл Браун объявили о возможной <strong>девятой планете</strong> на окраине Солнечной системы, за пределами орбиты Плутона. Планета примерно в десять раз массивнее, чем Земля, удалена от Солнца примерно в 20 раз дальше, чем Нептун (90 миллиардов километров), и делает оборот вокруг Солнца за 10 000—20 000 лет. По мнению Майкла Брауна, вероятность того, что эта планета реально существует, «возможно, 90 %». Пока учёные называют эту гипотетическую планету просто <strong>«Девятая планета»</strong> (англ. Planet Nine).</p>
<p>Источник: <a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%BE%D0%BB%D0%BD%D0%B5%D1%87%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0">Википедия</a></p>
</div>
</div>
</body>
</html>
Стили в style.css
body {
font-family: 'Open Sans';
margin: 0;
padding: 0;
}
.wrapper {
background: url(../images/earth.jpg) top center no-repeat;
background-size: cover;
height: 100%;
min-height: 100%; /* растягиваю на всю высоту для моего примера */
}
h1 {
color: #fff;
text-align: center;
margin: 0 15px;
}
p {
color: #c2c2c2;
font-style: italic;
}
a, a:link, a:hover, a:visited, a:focus {
color: #6b6b6b;
font-style: italic;
font-size: 16px;
transition: all .6s;
}
.list {
width: 80%;
margin: 0 auto;
}
.list ul {
display: flex;
flex-wrap: wrap; /* даем возможность переноса на другую строку в случае нехватки места */
list-style: none;
padding-left: 0;
justify-content: space-between; /* элементы равномерно распределяются по всей строке; первый и последний - прижимаются к краям */
}
.list ul li {
font-size: 18px;
font-style: italic;
border-radius: 15px;
background: rgba(255,255,255,0.77);
color: #060a16;
margin: 0 0 10px 0px;
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-basis: 46%;
width: 46%;
align-items: center;
}
.list ul li:before {
font-family: FontAwesome;
content: "\f101";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 70px;
font-style: normal;
color: #0c1828;
/*margin-right: 3%; - IE11 не делает отступ */
min-width: 10%; /* задана ширина, чтобы получить отступ справа для IE11 */
}
@media only screen and (max-width: 1250px){
.list {
width: 90%;
}
.list ul li {
-ms-flex-preferred-size: 45%; /* для IE */
flex-basis: 45%;
}
.list ul li:before {
font-size: 50px;
min-width: 12%; /* для IE11 */
}
}
@media only screen and (max-width: 986px){
.list ul li {
-ms-flex-preferred-size: 44%;
flex-basis: 44%;
}
}
@media only screen and (max-width: 850px){
.list ul li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.list ul li:before {
min-width: 10%;
}
}
@media only screen and (max-width: 450px){
.list ul li:before {
min-width: 12%;
}
}
@media only screen and (max-width: 368px){
.list ul li:before {
display: none;
}
}
Осталась нерешённая проблема с порядком элементов списка — они должны идти в две колонки:
- в первой колонке элементы с 1 по 4
- во второй колонке элементы с 5 по 8
Но они лишь равномерно распределяются слева направо, что видно по нумерации. Только при выстраивании в одну колонку получается правильный список.
Требуется третий вариант!
IE11-му сказала спасибо за понимание 🙂
Дальше займусь уроками по основам Nodejs и Gulp — это будут своеобразные инструкции, которые пишу для себя во время прохождения курсов. Данные конспекты собираюсь размещать в разделе Инструменты
Всем отличного дня! 🙂
Есть ли жизнь за пределами Земли, как вы думаете? По-моему, точно есть 😉
Голосов: 0, Средняя оценка: 0