Научи ме

WEB => HTML и CSS => Темата е започната от: Sp3ctator в 29 Февруари 2016, 10:58:08

Титла: Equal Column Height/Width проблем
Публикувано от: Sp3ctator в 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;

}



(http://store.picbg.net/thumb/C0/43/1e877950c1e8c043.jpg) (http://picbg.net/img.php?file=1e877950c1e8c043.jpg)

Както се вижда обаче, двете колони си поделят по 50% от мястото, което в моя случай със сайта не ме устройва, примерно искам "контейнера" да е 760px широк, а дясната колона да е по-малка от него. Пробвах да задам custum width в самия .css файл, но нищо не се получава. Тук вече сте вие, ако може да ми помогнете с разрешаването на този проблем :)
Титла: Re: Equal Column Height/Width проблем
Публикувано от: Avalanche в 29 Февруари 2016, 19:03:04
Здравей и добре дошъл в Научи Ме,

Контролира се от flex, което е съкратен синтаксис за трите свойства flex-grow, flex-shrink и the flex-basis (http://www.w3schools.com/cssref/css3_pr_flex.asp). С flex-grow може да кажеш колко пъти даден елемент да бъде по-голям от другите, а с flex-shrink колко пъти по-малък. Ето ти конкретен пример как първия елемент да стане 5 пъти по-голям от останалите https://jsfiddle.net/nxftkhpj/1/
Титла: Re: Equal Column Height/Width проблем
Публикувано от: Sp3ctator в 01 Март 2016, 15:19:54
Благодаря за бързия отговор Аvalanche,

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