Как сделать два div блока

[HyperLabTeam]

22 минуты назад, WIXVW сказал:

, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами.

очень просто
.col-lg-3 {
    width: 20%;
}

[Dimasscus]

24 минуты назад, WIXVW сказал:

 

@320 flex-direction: column

@768 flex-direction: row

все.
 

а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе.
и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами.
на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. 

Спасибо. Попробую

[lexxkrt]

25 минут назад, WIXVW сказал:

а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе.
и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами.
на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. 

открой для себя бутстрап 4, можешь и в 5 покопаться.

а вообще в чем проблема перекомпилировать бутстрап под себя.

[Tom]

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

Хочется , что бы это было яйцо Фаберже, изащряйся уже на уровне кастомных css стилей.

А озвучивать , что одно лучше другого, мне кажется безосновательно. Это ближе к яблочникам и любителям Самсунга, каждый из которых считает , что только их бренды позволят позвонить маме и сделать селфи в инстаграмчик, как то более совершенно, чем у противосторонних брендовых пользователей.

[WIXVW]

1 час назад, AWARO сказал:

очень просто
.col-lg-3 {
    width: 20%;
}

 

1 час назад, lexxkrt сказал:

открой для себя бутстрап 4, можешь и в 5 покопаться.

а вообще в чем проблема перекомпилировать бутстрап под себя.

 

 

так это такие же лишние строки css как и мой flex
а вот это .col-lg-3 {width: 20%;} применится ко всему на сайте, что имеет стандартный класс бутстрапа col-lg-3

[WIXVW]

12 минут назад, Tom сказал:

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

Хочется , что бы это было яйцо Фаберже, изащряйся уже на уровне кастомных css стилей.

А озвучивать , что одно лучше другого, мне кажется безосновательно. Это ближе к яблочникам и любителям Самсунга, каждый из которых считает , что только их бренды позволят позвонить маме и сделать селфи в инстаграмчик, как то более совершенно, чем у противосторонних брендовых пользователей.

 

между прочим, я не озвучивал, что это лучше. я работал на бутстрапе и 3-м, и 4-м. и столкнулся с некоторыми недоработками на экранах маленьких ноутов, в том числе эппл и на экранах 480-768px. поэтому я перешел на flex. и стал в нем разбираться.
если удалось изучить основательно что угодно, то ты будешь хорош в этом, не важно, что это.
можно точно так же написать себе быстро стили под flex grid и применять их потом так же, как и бутстрап.

я не навязываю свое мнение, я предложил вариант решения вопроса.
вообще, кто как хочет, так и д..чет. кто к чему привык

[WIXVW]

1 час назад, AWARO сказал:

очень просто
.col-lg-3 {
    width: 20%;
}

 

а если у этого элемента есть margin, то все у вас поплывет

[semen78]

В 23.01.2021 в 20:29, WIXVW сказал:

 

если по-современному делать, то так:
 

<div class="wrapper">
  <div class="div-1"></div>
  <div class="div-2"></div>
</div>


<style>
  .wrapper {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
  }
   .wrapper > div {
        flex: 1 1 50%;
  }
  
  @media (max-width: 700px) {
    .wrapper > div {
        flex: 1 1 100%;
  }
  }
  
</style>

 

 

Всем спасибо ребята! плюсанул всем, взял это решение!

[HyperLabTeam]

1 час назад, WIXVW сказал:

так это такие же лишние строки css как и мой flex

но тут три строки в отличии от вашей портянки ))
 в4ке флексы  уже присутствуют

 

[WIXVW]

2 часа назад, AWARO сказал:

но тут три строки в отличии от вашей портянки ))
 в4ке флексы  уже присутствуют

 

 

портянка сделана для защиты от всех старых браузеров, типа IE 11 и т.д.
если не учитывать эти браузеры, то код можно сократить до 5 строк

Змінено 25 січня 2021 користувачем WIXVW

[WIXVW]

3 часа назад, semen78 сказал:

Всем спасибо ребята! плюсанул всем, взял это решение!

 

я беру все нужное с официального сайта разработчиков mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins