Flex-контейнеры в css

radrigo · 18 июня 2017

Всем привет.

Помогите разобраться.

Как сделать во Flex контейнере определённое число элементов в ряду?

Допустим есть следующий код

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.cont_flex {
	background-color: #000;
	display: flex;
}
.block_flex {
	background-color: #fff;
	margin: 1px;
}
</style>
</head>

<body>
<div class="cont_flex">
  <div class="block_flex">Ьлок 1</div>
  <div class="block_flex">Ьлок 2</div>
  <div class="block_flex">Ьлок 3</div>
  <div class="block_flex">Ьлок 4</div>
  <div class="block_flex">Ьлок 5</div>
  <div class="block_flex">Ьлок 6</div>
</div>
</body>
</html>

Как сделать чтоб было только 3 блока в ряду и они бы равномерно растягивались по ширине контейнера?

Заранее признателен за подсказку.

master27 · 18 июня 2017

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.cont_flex {
	background-color: #000;
	display: flex;
}
.block_flex {
    background-color: #fff;
    flex: 1 1 auto;
    margin: 1px;
}
</style>
</head>

<body>
<div class="cont_flex">
  <div class="block_flex">Ьлок 1</div>
  <div class="block_flex">Ьлок 2</div>
  <div class="block_flex">Ьлок 3</div>
</div>
<div class="cont_flex">
  <div class="block_flex">Ьлок 4</div>
  <div class="block_flex">Ьлок 5</div>
  <div class="block_flex">Ьлок 6</div>
</div>
</body>
</html>

https://demo.agektmr.com/flexbox/

тут посмотрите

radrigo · 18 июня 2017

34 минуты назад, master27 сказал:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.cont_flex {
	background-color: #000;
	display: flex;
}
.block_flex {
    background-color: #fff;
    flex: 1 1 auto;
    margin: 1px;
}
</style>
</head>

<body>
<div class="cont_flex">
  <div class="block_flex">Ьлок 1</div>
  <div class="block_flex">Ьлок 2</div>
  <div class="block_flex">Ьлок 3</div>
</div>
<div class="cont_flex">
  <div class="block_flex">Ьлок 4</div>
  <div class="block_flex">Ьлок 5</div>
  <div class="block_flex">Ьлок 6</div>
</div>
</body>
</html>

https://demo.agektmr.com/flexbox/

тут посмотрите

Данный метод не очень подходит, так как предполагает наличие нескольких custom или же надо будет как-то использовать [newscount=x]

Методом проб получился более лучший вариант

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
html, body {
	margin: 0;
	padding: 0;
	border: 0;
}
.cont_flex {
	margin: 0 auto;
	max-width: 1000px;
	background-color: #000;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.block_flex {
	background-color: #fff;
	margin: 1px;
	min-width: 240px;
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 30%;
	-ms-flex: 1 0 30%;
	flex: 1 0 30%;
}

</style>
</head>

<body>
<div class="cont_flex">
  <div class="block_flex">Ьлок 1</div>
  <div class="block_flex">Ьлок 2</div>
  <div class="block_flex">Ьлок 3</div>
  <div class="block_flex">Ьлок 4</div>
  <div class="block_flex">Ьлок 5</div>
  <div class="block_flex">Ьлок 6</div>
</div>
</body>
</html>

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

Правда я не совсем уверен в правильности такого решения.

Кто что скажет?

Войти

Flex-контейнеры в css

Рекомендованные сообщения

radrigo 180

Ссылка на сообщение

Поделиться на других сайтах

master27 38

Ссылка на сообщение

Поделиться на других сайтах

radrigo 180

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению

Форум

Активность