Блог

Главная - Вопросы по программированию - Структура HTML и Flexbox работает не так, как ожидалось

Структура HTML и Flexbox работает не так, как ожидалось

#html #css #flexbox

#HTML #css — код #flexbox

Вопрос:

Привет, я не был слишком уверен, как на самом деле назвать это название. Я не мог придумать для него точного названия, но я ни за что на свете не могу понять, почему класс ‘topb’ находится в классе ‘bottom’, тогда как в HTML его нет. Структура, которую я ищу, выглядит следующим образом. Верхний родительский элемент — ‘.container’, тогда у меня есть две дочерние строки (‘top’ и ‘bottom’). В «top» у меня есть «topa» и «topb» в качестве дочерних элементов, оба из которых я хочу разделить на ряд. Теперь в примере по какой-то причине ‘topb’, который имеет черный цвет для своего черного поля, по какой-то причине находится в нижнем ряду, когда мне это нужно в верхнем. Я почти уверен, что это глупая ошибка, но я просто прохожу этот этап осознания того, на что обратить внимание, когда я делаю эти простые вещи.

-Спасибо

 .container {
    display: flex; 
    position: relative;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    height: 100vh; 
    width: 80%;	
	/*padding-top: 2%;
	padding-bottom: 18%;
    margin: 5% auto 8% auto; */
    background-color: white;
}
.container h2 {
	color: orange;
}
.top {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;	
	border: 2px solid blue;		
}
.top * {
	flex: 1 1 50%;
}
.bottom {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	border: 2px solid red;
}
.top,
.bottom {
	width: 100%;
}
.topa {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	border: 2px solid orange; 
	height: 100%;
}
.topb {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	border: 2px solid purple; 
	background-color: black;
	height: 100%;
} 
 <div id="bigwrap">
	<div class="container">
    	<div class="top">
        	<div class="topa">
            </div>
            <div class="topb">
            </div>           
        </div>
        <div class="bottom">
        </div>
    </div>
</div>

Ответ №1:

Измените это:

 .top * {
    flex: 1 1 50%;
}

К этому:

 .top * {
    flex: auto;
}

https://jsfiddle.net/maspq7np/

Вот небольшая документация: https://css-tricks.com/snippets/css/a-guide-to-flexbox /

Комментарии:

1. Подождите, но как изменение этого имеет отношение к позиционированию? Это работает, но я просто немного запутался в том, как это работает. Также, насколько мне известно, flex: auto не рассматривается в этом документе. Я просто немного смущен тем, как здесь уместно управлять гибкой основой. Спасибо

2. Неважно, что это покрыто, но все еще запутано в том, насколько эти два были актуальны.

Ответ №2:

Я думаю, вы хотели что-то вроде этого:

 .container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
  height: 100vh;
  width: 80%;
  margin: auto;
  background-color: white;
}
.top {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid blue;
}
.top,
.bottom {
  flex: 0 0 100%;
  height: 50%;
}
.top * {
  flex: 1 1 50%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.topa {
  background: orange;
}
.topb {
  background: purple;
}
.bottom {
  background: red;
} 
 <div class="container">
  <div class="top">
    <div class="topa"></div>
    <div class="topb"></div>
  </div>
  <div class="bottom">
  </div>
</div>

В вашем примере нижний div не имел height….so есть одна возможная причина.

Метки: