Как сделать динамический c ширина div в 3-х колонном css flex box - PullRequest
Новая
       0

Как сделать динамический c ширина div в 3-х колонном css flex box

0 голосов
/ 22 февраля 2020

Я хочу сделать 3 колонки с флексбоксом. Цель состоит в том, чтобы сделать первую и последнюю ширину div динамической c. Но 2-й див max-width - это статус c.

Код: 

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
        
        html, body{
    
            min-height: 100% !important;
            height: 100%;
        }
    
        body{
    
            margin: 0;
            background-color: #ddd;
    
            display: flex;
            justify-content: space-between;
        }
    
        .left , .center, .right{
    
            height: 100%;
        }
    
        .left{
            width: auto;
            background-color: antiquewhite;
        }
    
        .center{
    
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            
            width: 100%;
            max-width: 1200px;
    
            background-color: green;
        }
    
        .right{
            
            width: auto;
            background-color: blue;
        }
        </style>
    </head>
    <body>
        
        <div class="left">
    
        </div>
    
        <div class="center">
    
        </div>
    
        <div class="right">
    
        </div>
    
    </body>
    </html>

Теперь я получаю максимальную ширину center, которую я ожидал. Но left & right div не появляются всегда. Я хочу, чтобы right & left div отображался с динамической шириной c в зависимости от размера окна браузера.

Обновление:

текущий макет:

enter image description here

Ожидаемое расположение:

enter image description here

Как я могу заставить это работать?

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Здесь вы go.

Просто примените flex:1 ко всем элементам , но flex: 1 0 100%; к центральному элементу, чтобы он по умолчанию был максимально широким, прежде чем ударить max-width вы хотели. 

html,
body {
  min-height: 100% !important;
  height: 100%;
}

body {
  margin: 0;
  background-color: #ddd;
  display: flex;
}

.left,
.center,
.right {
  flex: 1;
  height: 100%;
}

.left {
  width: auto;
  background-color: red
}

.center {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  flex: 1 0 100%;
  width: 100%;
  max-width: 1200px;
  background-color: green;
}

.right {
  width: auto;
  background-color: blue;
}
<div class="left">

</div>

<div class="center">

</div>

<div class="right">

</div>
0 голосов
/ 22 февраля 2020

это помогает? 

	.flex-container {
	  display: flex;
	  justify-content: space-between;
	  background-color: DodgerBlue;
	}

	.flex-container > .side {
	  background-color: green;
	  width: 100%;
	}


	.flex-container > .center {
	  background-color: #f1f1f1;
	  color: green;
	  max-width: : 100%;
	  height: 100px;
	}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div class="side"></div>
  <div class="center">
  	this will expand as your content grows
  </div>
  <div class="side"></div>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...