Курс
Верстка адаптивной CSS галереи
В этом курсе мы разберем как сверстать адаптивную css галерею. Также познакомимся с Flexbox.
Как сверстать адаптивную flexbox галерею
В этом уроке мы применим flexbox на практике и попробуем сверстать адаптивную галерею без media queries.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Галерея на Flexbox</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <section id="photo-wall"> <ul> <li> <a href=""> <img src="img/1.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/2.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/3.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/4.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/5.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/6.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/7.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/8.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/9.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/10.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> </ul> </section> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.container { width: 80%; margin: 30px auto; overflow: hidden; } .container ul { display: flex; flex-wrap: wrap; } .container ul li { flex-grow: 1; /* flex-shrink: 3;*/ flex-basis: 100px; list-style:none; font: 10px/1.5 Verdana, Helvetica, Sans-serif; width: 16%; margin: 2% 2% 40px 2%; } .container ul li a { color: #5d5f5d; } .container ul li a img { max-width: 100%; } |
Оставь комментарий!
One thought on “Как сверстать адаптивную flexbox галерею”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Рекомендуемые курсы
набагато менше коду