Автор Тема: Equal Column Height/Width проблем  (Прочетена 1074 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

Sp3ctator

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 2
Equal Column Height/Width проблем
« -: 29 Февруари 2016, 10:58:08 »
Здравейте,

Правя си едно малко сайтче и наскоро се натъкнах на проблема с еднаквостта при височината на два от елементите, в случая "мястото където ще е същинската информация" и "дясната колона". Като попълня повече инфо в една от двете, другата остава грозно във въздуха, поразрових се в нета и открих множество решения, и понеже не съм супер напреднал на CSS, избрах най-краткото и чисто (без JS). Резултата стана много добър:
<html>
<head>
    <title>some test</title>
    <link rel="stylesheet" type="text/css" href="testcss.css"/>
</head>
<body>

<div class="flexbox">
    <div class="col">страница за новини</div>
    <div class="col">страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред</div>
</div>


</body>
</html>

Ето и CSS:

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}
.flexbox .col {
    flex: 1;
    padding: 20px;
}
.flexbox .col:nth-child(1) {
    background: #cc2138;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;


}
.flexbox .col:nth-child(2) {
    background: #1945ee;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;

}





Както се вижда обаче, двете колони си поделят по 50% от мястото, което в моя случай със сайта не ме устройва, примерно искам "контейнера" да е 760px широк, а дясната колона да е по-малка от него. Пробвах да задам custum width в самия .css файл, но нищо не се получава. Тук вече сте вие, ако може да ми помогнете с разрешаването на този проблем :)

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Equal Column Height/Width проблем
« Отговор #1 -: 29 Февруари 2016, 19:03:04 »
Здравей и добре дошъл в Научи Ме,

Контролира се от flex, което е съкратен синтаксис за трите свойства flex-grow, flex-shrink и the flex-basis. С flex-grow може да кажеш колко пъти даден елемент да бъде по-голям от другите, а с flex-shrink колко пъти по-малък. Ето ти конкретен пример как първия елемент да стане 5 пъти по-голям от останалите https://jsfiddle.net/nxftkhpj/1/
« Последна редакция: 29 Февруари 2016, 21:40:08 от Avalanche »
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

Sp3ctator

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 2
Re: Equal Column Height/Width проблем
« Отговор #2 -: 01 Март 2016, 15:19:54 »
Благодаря за бързия отговор Аvalanche,

Нещата станаха както исках с "flex-basis=xxxpx" :)