Flexbox блоки(растяжение)

@prizrak115 · Регистрация: 19.02.2018

Студворк — интернет-сервис помощи студентам

как сделать так чтобы блоки не растягивались, на мелких экранах.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css" />
  <meta name="viewport" content="width=1024" />
  <title>Document</title>
</head>
<body>
  <header>
    1
  </header>
  <div class="gl">
  <div class="container">
    <div class="block">
      t
    </div>
    <div class="sidebar">
      <div class="sidetop">
      </div>
      <div class="sidebottom">
        2
      </div>
 
    </div>
  </div>
</div>
<footer>
 
</footer>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
*{
  margin: 0;
  padding: 0;
}
header{
  width: 100%;
  height: 62px;
  background: black;
}
 
.gl{
  display: flex;
  justify-content: center;
}
 
.container{
  width: 80%;
  height: 1250px;
  overflow: hidden;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
 
.block{
  width: 70%;
  height: 1200px;
  background: rgb(4, 255, 0);
}
 
.sidebar{
  /*width: 30%;*/
  width: 200px;
  height: 800px;
  margin-left: 2%;
}
 
.sidetop{
  /*width: 100%;*/
  width: 960px;
  height: 250px;
  background: rgba(199, 255, 0);
  margin-bottom: 20px;
  padding: 10px;
  text-align: center;
}
 
.sidebottom{
/*  width: 100%;*/
  width: 960px;
  height: 1100px;
  background: rgba(23, 0, 68);
}
 
footer{
  width: 100%;
  height: 62px;
  background: black;
  margin-top: 20px;
}

Добавлено через 5 часов 4 минуты
Пробыл в процентах серавно...

Добавлено через 49 минут
вроде-бы всё нормально с главным блоком, а вот с сайдбарами нет, они растягиваются на мелких экранах.

@Academik · 03.07.2018, 18:47

prizrak115, я не вижу чтоб сайдбары расстягивались. Вы ведь им прописали ширину в пикселах, они не должны расстягиваться по горизонтали.
https://jsfiddle.net/zo16hu0m/1/

@prizrak115 · 03.07.2018, 20:59 **[ТС]**

Мне надо чтоб они вообще не растягивались, вроде-бы есть растяжение при уменьшение экрана, верхний сайдбар в высоту.
И я уже решил, ширину контейнера было 80% то-есть не в пикселях, поставил 900px.

Добавлено через 9 минут
Ну всё же есть пробелма с блоком, блок как бы расширяется при увелечении экрана, всё в пикселях.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=1024" />
  <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet">
  <title>Silencet</title>
</head>
<body>
  <header>
    <nav>
      <div class="navMenu">
        <a href="">О нас</a>
        <a href="">test</a>
        <a href="">Форум</a>
        <a href="">Услуги</a>
        <a href="">Правила</a>
        <a href="">Саппорт</a>
      </div>
    </nav>
  </header>
  <div class="BlockImg">
    <img src="img/1.png" alt="V.I.P" />
    <input type="button" name="" value="Играть">
  </div>
  <main>
    <div class="wrapper">
      <div class="container">
        <div class="block">
        </div>
      </div>
    </div>
    <footer>
    </footer>
  </main>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body{
  background-color: #EDEEF0;
  border-top: 1px solid transparent;
 
}
 
a{
  text-decoration: none;
}
 
input{
  outline: none;
}
 
 
 
/*Menu*/
header{
  width: 100%;
  position: fixed;
  height: 62px;
  margin-top: -1px;
  background-color: rgba(20, 20, 20, 0.94);
  overflow: hidden;
  z-index: 999999;
}
 
.navMenu{
  max-width: 960px;
  margin: 0 auto;
  margin-top: -3px;
  display: flex;
  justify-content: space-between;
}
 
.navMenu a{
  font-family: sans-serif;
  font-size: 21px;
  font-weight: bold;
  padding: 20px;
  color: #666;
}
 
.navMenu a:hover{
  color: rgb(255, 255, 255);
  transition: 0.30s;
}
/*End*/
 
/*IMG*/
.BlockImg{
  margin-top: 68px;
  margin-bottom: 5px;
  position: relative;
}
 
.BlockImg img{
  width: 100%;
}
 
.BlockImg input{
  width: 14%;
  height: 18%;
  font-size: 25px;
  font-family: 'Russo One', sans-serif;
  position: absolute;
  left: 48.6%;
  top: 56%;
  transform: translate(-50%, -50%);
  border: 2px solid #666;
  color: #666;
  border-width: thick;
  background-color: transparent;
}
 
.BlockImg input:hover{
  border: 2px solid white;
  color: white;
  cursor:  pointer;
}
/*End*/
 
.wrapper{
  display: flex;
  justify-content: center;
}
 
.container{
  width: 900px;
  height: 800px;
  margin-bottom: 20px;
  overflow: hidden;
  margin-top: 10px;
  background: rgb(212, 254, 47);
}
 
footer{
  width: 100%;
  height: 62px;
  background-color: black;
}

@prizrak115 · 03.07.2018, 21:14 **[ТС]**

Ладно если быть точнее то у меня проблемы с

.container задав те же 1500px, всё нормально ну теперь блоки прижимаются к праву и левому углу. Задав 80 процентов всё
стало хорошо, но тот же блок и сайдбары как бы стали большими.
обнв код css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body{
  background-color: #EDEEF0;
  border-top: 1px solid transparent;
 
}
 
a{
  text-decoration: none;
}
 
input{
  outline: none;
}
 
 
 
/*Menu*/
header{
  width: 100%;
  position: fixed;
  height: 62px;
  margin-top: -1px;
  background-color: rgba(20, 20, 20, 0.94);
  overflow: hidden;
  z-index: 999999;
}
 
.navMenu{
  max-width: 960px;
  margin: 0 auto;
  margin-top: -3px;
  display: flex;
  justify-content: space-between;
}
 
.navMenu a{
  font-family: sans-serif;
  font-size: 21px;
  font-weight: bold;
  padding: 20px;
  color: #666;
}
 
.navMenu a:hover{
  color: rgb(255, 255, 255);
  transition: 0.30s;
}
/*End*/
 
/*IMG*/
.BlockImg{
  margin-top: 68px;
  margin-bottom: 5px;
  position: relative;
}
 
.BlockImg img{
  width: 100%;
}
 
.BlockImg input{
  width: 14%;
  height: 18%;
  font-size: 25px;
  font-family: 'Russo One', sans-serif;
  position: absolute;
  left: 48.6%;
  top: 56%;
  transform: translate(-50%, -50%);
  border: 2px solid #666;
  color: #666;
  border-width: thick;
  background-color: transparent;
}
 
.BlockImg input:hover{
  border: 2px solid white;
  color: white;
  cursor:  pointer;
}
/*End*/
 
.wrapper{
  display: flex;
  justify-content: center;
}
 
.container{
  width: 90%;
  height: 1200px;
  margin-bottom: 20px;
  overflow: hidden;
  margin-top: 10px;
  background: rgb(212, 254, 47);
  display: flex;
  justify-content: center;
}
 
.block{
  width: 1000px;
  height: 900px;
  background: rgb(255, 255, 255);
}
 
.sidebar{
  width: 350px;
  height: 900px;
  background: rgb(255, 255, 255);
  margin-left: 15px;
}
 
.sidetop{
  width: 350px;
  height: 300px;
  background: rgb(179, 222, 0);
 
}
 
 
footer{
  width: 100%;
  height: 62px;
  background-color: black;
}

Скрины нииже:

@AlexZaw · 03.07.2018, 21:29

Вот если честно, у вас не вертска, а не пойми что... Смесь резиновой верстки с фиксированной, да еще с лишними обертками... Такое впечатление что вы нахватались кусками того-сего, а как это работает не понимаете. Изучайте все последовательно иначе ничему вы не научитесь.
Можете объяснить зачем вам в head два viewport-a ?

@prizrak115 · 03.07.2018, 21:55 **[ТС]**

Ну во-первых это автоматом ставится. И мне это не мешает, так как это просто для меня(учусь).
Ну конечно простите меня, я не столько высокого уровня... И что мне по твоему изучать, чтоб всё получилось?
В моей задумке было создать 3 сайдбара: левый и 2 правых. Да ты прав wrapper лишний, marg-ом выровнял.
Скажика мне, что я должен знать?
Я знаю:
html
css(база, уже месяц учу) + FlexBox
........................................ .........................
И конечно же я пытаюсь верстать фиксированный сайт.

@AlexZaw · 03.07.2018, 22:26

Сообщение от prizrak115

Ну во-первых это автоматом ставится

Автоматом сатвиться два viewport-a? Не рассказывайте сказки, я даже знаю откуда у вас взялся второй.

Сообщение от prizrak115

И мне это не мешает, так как это просто для меня(учусь).

То что вам это не мешает не означает что это правильно, если учитесь, так учитесь сразу правильно.

Сообщение от prizrak115

Я знаю:
html
css(база, уже месяц учу) + FlexBox

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

Добавлено через 7 минут
зы.Если вы создаете фиксированный сайт, то зачем вы переживаете о том что у вас что то тянется при изменении размеров?
ззы. Мы конечно можем набросать вам решение вашей задачи, если вы толком объясните что вы хотите и приложите схему как это должно выглядеть, но вот поможет ли вам готовое решение в вашем обучении, вот в чем вопрос. Многие конечно говорят, что нужно смотреть как сделано у тех кто разбирается в этом лучше тебя, но вот без объяснений почему сделано так и что именно происходит, от этого мало толку

@prizrak115 · 04.07.2018, 10:02 **[ТС]**

Ну вы правы, ладно пройду самоучителя по css может что нового узнаю, обычно я не учился по htmlbook, а использовал как справочник. А насчёт viewport, вы знаете такой плагин emmet? Конечно 2-ой я сам добавил. Просто поймите вы правы, я понимаю вас как то, что я ничего за месяц не научился.(как будто намёки, что я тупой.)

@AlexZaw · 04.07.2018, 10:38

Сообщение от prizrak115

(как будто намёки, что я тупой.)

Я ни на что не намекаю, сколько вы занимаетесь я не знал пока вы сами не сказали. Просто указал вам на то что вы плохо знаете как работает css. Лучше бы вы пару часов потратили на поиск информации о том где и как лучше учить css самостоятельно (да хоть бы тут же на форуме спросили) и за этот месяц достигли бы гораздо больших результатов.
Насчет htmlbook, да он конечно больше как справочник, но справочник с примерами, вопросами для проверки, плюс там есть практикум от простого к сложному.
А вот htmlacademy (хоть он мне и не особо нравится, особенно их курс по флексбоксам который больше путает чем объясняет.) уже больше похож на самоучитель, даже бесплатные курсы дают много информации. Хотя и в платных там никаких секретов нет и все это можно найти в бесплатном доступе.

@SiarheiSiarhei · 05.07.2018, 15:30

у, всякого Абрама своя программа...

CSS
1
2
3
4
5
.flex-item {
    order: 0;
    flex: 0 1 33%;
    align-self: auto;
    }

как регулятор....

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	03.07.2018, 18:47
	prizrak115, я не вижу чтоб сайдбары расстягивались. Вы ведь им прописали ширину в пикселах, они не должны расстягиваться по горизонтали. https://jsfiddle.net/zo16hu0m/1/ 1

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,095
	03.07.2018, 21:29
	Вот если честно, у вас не вертска, а не пойми что... Смесь резиновой верстки с фиксированной, да еще с лишними обертками... Такое впечатление что вы нахватались кусками того-сего, а как это работает не понимаете. Изучайте все последовательно иначе ничему вы не научитесь. Можете объяснить зачем вам в head два viewport-a ? 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	03.07.2018, 21:55 [ТС]
	Ну во-первых это автоматом ставится. И мне это не мешает, так как это просто для меня(учусь). Ну конечно простите меня, я не столько высокого уровня... И что мне по твоему изучать, чтоб всё получилось? В моей задумке было создать 3 сайдбара: левый и 2 правых. Да ты прав wrapper лишний, marg-ом выровнял. Скажика мне, что я должен знать? Я знаю: html css(база, уже месяц учу) + FlexBox ........................................ ......................... И конечно же я пытаюсь верстать фиксированный сайт. 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	04.07.2018, 10:02 [ТС]
	Ну вы правы, ладно пройду самоучителя по css может что нового узнаю, обычно я не учился по htmlbook, а использовал как справочник. А насчёт viewport, вы знаете такой плагин emmet? Конечно 2-ой я сам добавил. Просто поймите вы правы, я понимаю вас как то, что я ничего за месяц не научился.(как будто намёки, что я тупой.) 0

Flexbox блоки(растяжение)

Решение

Решение