CSS для флексбоксов изображений: форсирование столбцов и строк

Это не работает для сгибания изображений в виде строк, только столбцов. Я не уверен, что еще изменить или добавить.

img{
    display: flex;
    flex-direction: row;
    align-content:center;
    align-items: center;
    align-self: center;
    justify-content: center;
}

body{
    background-color:#ffffff;
    flex-direction: row;
}

.medium {
    width:40%;
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    flex-basis: 300px;
    align-content:flex-start;
    margin: 20px auto;
}

<img alt = "Kid's Activity" src = "images/lemonade.jpg" class = "medium"/>

Привет, пожалуйста, предоставьте рабочий пример

— 15.10.2018 07:30

css image flexbox

15.10.2018 07:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 3

Надеюсь, это то, что ты ищешь

body {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.medium {
  width: 30%;
  margin: 20px;
}

<img alt = "Kid's Activity" src = "http://placekitten.com/300/300" class = "medium" />
<img alt = "Kid's Activity" src = "http://placekitten.com/300/300" class = "medium" />
<img alt = "Kid's Activity" src = "http://placekitten.com/300/300" class = "medium" />
<img alt = "Kid's Activity" src = "http://placekitten.com/300/300" class = "medium" />

15.10.2018 07:55

Вы можете попробовать это

body{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.medium {
    width:40%;
    flex-basis: 300px;
    align-content:flex-start;
    margin: 20px auto;
}

<img alt = "Kid's Activity" src = "http://placekitten.com/g/300/300" class = "medium"/>
<img alt = "Kid's Activity" src = "http://placekitten.com/g/300/300" class = "medium"/>

15.10.2018 08:11

Попробуйте этот код! Надеюсь, это сработает для вас.

body{
  margin: 0;
  padding: 0;
}
.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.medium {
    flex-direction: column;
    display: block;
    height: 300px;
    width: 450px;
    margin-right: 15px;
}
.medium:last-child {
  margin-right: 0;
}

<div class = "wrapper">
  <img alt = "Kid's Activity" src = "https://image.ibb.co/k303BL/111.jpg" class = "medium"/>
  <img alt = "Kid's Activity" src = "https://image.ibb.co/k303BL/111.jpg" class = "medium"/>
  <img alt = "Kid's Activity" src = "https://image.ibb.co/k303BL/111.jpg" class = "medium"/>
    <img alt = "Kid's Activity" src = "https://image.ibb.co/k303BL/111.jpg" class = "medium"/>
</div>

15.10.2018 08:32

Другие вопросы по теме

Веб-страница не может отображать некоторые изображения

Java - Различные способы затемнения и отображения изображений

Как увеличить холст изображения?

Суперразрешение: свертки, оставляющие следы на краях

Выполняют ли браузеры предварительную проверку CORS для изображений с перекрестным происхождением?

Как сравнить две подписи с помощью javascript или php

Matplotlib меняет каналы изображения при сохранении

Маскирование верхних или нижних 4 бит приводит к тому же изображению

Как отобразить изображение с заданными размерами в php

Поле выбора Django с использованием изображений вместо текста, не отображаемого

CSS для флексбоксов изображений: форсирование столбцов и строк

Ответы 3

Другие вопросы по теме

Похожие вопросы