Блог

Главная - Вопросы по программированию - вложенный flexbox отображается некорректно

вложенный flexbox отображается некорректно

#html #css #flexbox #alignment

#HTML #css #flexbox #выравнивание

Вопрос:

Я новичок в flexbox. Я пытаюсь внедрить flexbox с другими параметрами в уже существующий flexbox. Это то, что я получил на данный момент. Это то, что я пытаюсь сделать : 

 html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads {}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  background-color: green;
}  
 <div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>

  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>

  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Ответ №1:

Вы можете сделать это без вложения flexboxes — просто настройте width и margin ads_element — смотрите демонстрацию ниже:

 html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads_element {
  width: calc(25% - 15px); /* CHANGED */
  height: 100px;
  background-color: transparent !important; /* CHANGED */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}  
 <div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <!-- <div class="ads"> -->
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <!-- </div> -->
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Если вы не хотите изменять свою разметку, вы можете просто создать ads еще и flexbox — смотрите демонстрацию ниже:

 html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads { /* ADDED */
  display: flex;
  width: 100%;
  background: transparent !important;
  
}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  /* background-color: green; */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}  
 <div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Ответ №2:

вам нужно установить ширину и высоту ads , иначе этот тег и все, что внутри него, по умолчанию будут иметь ширину 0 и высоту 0 

 .ads
{
    width: 100%;
  height: 100%;
  display: flex;
}
.ads_element
{
    width: calc(25% - 5px);
    height: 100px;
    background-color:green;
  margin: 10px;
}

добавьте его в свой код, чтобы увидеть результат

Ответ №3:

Я заполнил css-свойства класса ads

 .ads
{
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
}

Проверьте рабочую скрипку здесь https://jsfiddle.net/L5egv0ah/1 /

Ответ №4:

Изменяет css .ads и .ads_element ниже, используя display:flex и width: 100% и перезапись цвета фона

 html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > div:nth-child(even) 
{
  background-color: red;
}

.container > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
	max-width: 500px;
	margin: auto;
	border: 5px solid #ffcc5c;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.element
{
    box-sizing: border-box;
    border: 1px solid #edeeee;
    width: calc(50% - 5px);
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.container > div:nth-child(odd).ads
{
    width: 100%;
    display: flex;
    background-color: transparent;
}
.ads_element
{
	width: calc(25% - 5px);
	height: 200px;
	border:3px solid red;
  background-color: transparent;
  margin: 0px 5px;
}  
 <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>

	<div class="ads"> 
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>	
	</div>

    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Ответ №5:

Это то, что вы хотите сделать:

HTML

 <div class="container">
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
    <div class="ads"> 
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div> 
    </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS

 html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > .element_row > div:nth-child(even) 
{
  background-color: red;
}

.container > .element_row > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
    max-width: 500px;
    margin: auto;
    border: 5px solid #ffcc5c;
    display: flex;
  flex-flow: column;
}
.element_row{
  display:flex;
  flex-flow:row;
  justify-content: space-between;
}
.element
{
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #edeeee;
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.ads
{
    display: flex;
  flex-flow:row;
  justify-content: space-evenly;
}
.ads_element
{
  width: 22%;
    height: 200px;
    border: 3px solid red;
}