Как сгделать два 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 строк

Edited January 25, 2021 by WIXVW

[WIXVW]

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

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

 

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