Алмазная сетка на Flexbox

Мне нужна помощь У меня есть ромбовидная сетка, но она не реагирует. моя задача - сделать его сеткой на флексбоксе! в мобильных разрешениях (340 пикселей) будет два подряд. Я уже все перепробовал и не знаю как еще сделать :( я отредактировал этот код - box-sizing: border-box

отправляю скриншот с примером как должно бытьвведите описание изображения здесь

* {
  box-sizing: border-box
}
.container {
  width: 940px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.container .item {
  margin-top: 110px;
  -webkit-flex-basis: 240px;
      -ms-flex-preferred-size: 240px;
          flex-basis: 240px;
  height: 240px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background-color: #e2e4e7;
  border: 15px solid #f6f8fb;
  outline: 1px solid #e2e4e7;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-flex: 50vh;
  -webkit-flex-grow: 50vh;
      -ms-flex-positive: 50vh;
          flex-grow: 50vh;
}

.container .item:hover {
  background-color: #3e9eff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.container .item:nth-child(n+4) {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin-top: -65px;
}

.container .item:nth-child(4) {
  margin-left: 175px;
}

.container .item:nth-child(5) {
  margin-right: 175px;
}

.sectionTwo .container .item:last-child {
  margin: 0 auto;
  margin-top: -65px;
}

<div class = "container">
                <a href = "#" class = "item"></a>
                <a href = "#" class = "item"></a>
                <a href = "#" class = "item"></a>
                <a href = "#" class = "item"></a>
                <a href = "#" class = "item"></a>
                <a href = "#" class = "item"></a>
            </div>

начните с добавления box-sizing: border-box;, чтобы сделать его лучше

— 20.10.2018 22:31

конечно, это есть в моем коде, но это не делает его отзывчивым

— 20.10.2018 23:24

Что значит "не реагирует"? Как бы вы хотели сделать его отзывчивым?

— 21.10.2018 01:21

когда разрешение дисплея будет 340 пикселей, это ромбики должны быть двумя блоками в строке

— 21.10.2018 10:21

html css flexbox

20.10.2018 21:36

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

533

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы превратить ваш бриллиант в идеально отзывчивый, я удалил вашу маржу и работал только со свойством transform: translateX-Y и rotate (я думаю, это более управляемо).

Я добавил медиа-запрос, чтобы преобразовать его в сетку с двумя блоками в любой строке. (340 очень мало, чтобы увидеть, что здесь работает, поэтому я изменил его на 640 пикселей, но вы можете написать любую ширину, которую хотите, также 340 пикселей: результат тот же).

Чтобы создать масштабируемый квадрат, я использовал интересную технику, которую вы можете найти здесь хорошо объясненной (спасибо @ G-Cyr +1 за него): css сетка квадратов с помощью flexbox.

Я попытался скопировать «ромб» на изображении, которое вы включили в свой пост.

HTML такой же, играл только с CSS.

Надеюсь, это поможет.

Это код:

body{
	background-color:#131313;
}

* {
  box-sizing: border-box
}

.container {
  display: flex;
  max-width:940px;
  width:60vw;
  flex-wrap: wrap;
  margin:0 auto;
}

.container .item {
   flex: 1 0 auto;
   height:auto;
   width: 50%;
   background-color: #424242;
}

.container .item:nth-child(1) {
  transform: translateY(25%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(2) {
  transform: translateY(25%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(3) {
  transform: translateY(75%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(4) {
  transform: translateY(75%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(5) {
  transform: translateY(125%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(6) {
  transform: translateY(125%) translateX(25%)  rotate(45deg);
}

.container .item:before {
    content:'';
    float:left;
    padding-top:100%;
}

.container .item:hover {
  background-color: #3e9eff;
  transition: all .3s ease;
}

@media (min-width: 640px){
	.container .item {
		width: 33.3333%;
	}

	.container .item:nth-child(1) {
	  transform: translateY(25%) translateX(-50%) rotate(45deg);
	}

	.container .item:nth-child(2) {
	  transform: translateY(25%) rotate(45deg);
	}

	.container .item:nth-child(3) {
	  transform: translateY(25%) translateX(50%) rotate(45deg);
	}

	.container .item:nth-child(4) {
	  transform: translateY(0%) translateX(25%) rotate(45deg);
	}

	.container .item:nth-child(5) {
	  transform:  translateY(0%) translateX(75%) rotate(45deg);
	}

	.container .item:nth-child(6) {
	  transform:  translateY(75%) translateX(-100%)  rotate(45deg);
	}
}

<div class = "container">
    <a href = "#" class = "item"></a>
    <a href = "#" class = "item"></a>
    <a href = "#" class = "item"></a>
    <a href = "#" class = "item"></a>
    <a href = "#" class = "item"></a>
    <a href = "#" class = "item"></a>
</div>

Спасибо! это как раз то, что мне нужно!

— 23.10.2018 23:09

22.10.2018 22:22