Адаптивный список на flex — 2

Список на flex
Один из элементов списка на 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&amp;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
Top Юлия Волобой