Разработываем страницу, из трех разного цветна столбцов.

Небольшое руководство для, начинающих изучать веб-технологии.

Разработываем страницу, из трех разного цветна столбцов. Левый шириной 100 пикселей, центральный и правый занимают все оставшееся место равномерно. Высота всех 100% страницы. Нет ни скроллбара ни белых полос вокруг страницы.

Итак приступим:

Вариант №1

Уж совсем простой.

<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</body>

 

body {
display: flex;
}
.one {
width: 100px;
height: 100%;
background: red;
}
.two {
width: calc(50vw - 50px);
height: 100%;
background: green;
}
.three {
width: calc(50vw - 50px);
height: 100%;
background: blue;
}

 

 

Однако красота и читабельность кода требует доработки.

Почему я навешиваю стили на body?
Так получилось из личного опыта: первоночально в одном из моих проектов было примерно так:

body {
max-width: 1024px;
}

 

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

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

html, body {
height: 100%;
margin: 0;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}

 

Вариант №2

Второй способ самый очевидный это раскладка в таблицу.

<table class="blocks">
<td class="blocks--block__fixed-width red"></td>
<td class="blocks--block green"></td>
<td class="blocks--block blue"></td>
</table>

 

.blocks {
height: 100%;
border-collapse: collapse;
}
.blocks--block__fixed-width {
width: 100px;
}
.blocks--block {
width: calc(50vw - 50px);
}

 

 

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

Вариант №3

Характерной чертой последующего варианта является вспомогательная оболочка для 2 и 3 столбца. Эта оболочка (wrapper) позволяет быстрее регулировать проблему распределения места страницы между центральным и правым стобцами.

<div class="blocks">
<div class="blocks--block__fixed-width red"></div>
<div class="blocks--wrapper">
<div class="blocks--block green"></div>
<div class="blocks--block blue"></div>
</div>
</div>

 

.blocks, .blocks--wrapper {
display: flex;
height: 100%;
}
.blocks--wrapper {
width: calc(100% - 100px);
}
.blocks--block {
width: 50%;
}
.blocks--block__fixed-width {
width: 100px;
}

 

 

Вариант 4

В этом примере я использую псевдоклассы :first-child и :not(:first-child) для отделения соответственно 1 и всех кроме первого элементов, обладателей class=»block».И объединяю свойства flex-grow, flex-shrink и flex-basis.

<div class="blocks">
<div class="block red"></div>
<div class="block green"></div>
<div class="block blue"></div>
</div>

 

.blocks {
display: flex;
height: 100%;
}
.block:first-child {
flex: 0 0 100px;
}
.block:not(:first-child) {
flex: 1 1 auto;
}

 

 

Тут такой момент, его хочется подчеркнуть отдельно: если количество однотипных колонок будет возростать и будет необходимость использовать, к примеру, функцию map для их создания, то этот метод стилизации позволит это осуществить гораздо проще. Вот такой случай на примере следующего кода:

<div id="root"></div>

const colours = ['red','blue','green'];

const blocks = colours.map(colour =>
<div className={"block " + colour}></div>
);

ReactDOM.render(
<div className="blocks">{blocks}</div>,
document.getElementById('root')
);

#root, html, body {
height: 100%;
margin: 0;
}
.blocks {
display: flex;
height: 100%;
width: 100%;
}
.block:first-child {
flex: 0 0 100px;
}
.block:not(:first-child) {
flex: 1 1 auto;
}

 

Рендеринг этих компонентов происходит с помощью библиотеки React, при создание огромного количества подобных элементов это часто_встречающаяся задача и вероятность её автоматизации это большой +. Вот об этом надо помнить на всех стадиях веб-разработки: дизайн, верстка, программирование.

Вариант №5

Последний вариант с оговоркой, раскрашивание страницы.

<div class="container"></div>

html, body {
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
background: linear-gradient(
to right,
red 100px,
green 100px,
green calc(50% + 50px),
blue calc(50% + 50px)
);
}

 

Тут применяется свойство background, оно и задает градиентное изменение цветов слева на право. Для точной границы каждый следующий цвет начинается с точки остановки прошлого цвета.

Lexiis.ru это —

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