вложенный flexbox не отображается правильно - PullRequest
Новая
       17

вложенный flexbox не отображается правильно

0 голосов
/ 04 марта 2019

Я новичок во флексбоксе.Я пытаюсь внедрить 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>

Ответы [ 5 ]

0 голосов
/ 04 марта 2019

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

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;
}
0 голосов
/ 04 марта 2019

Вы можете сделать это без вложенности флексбоксов - просто настройте 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>
0 голосов
/ 04 марта 2019

Я заполнил css свойства класса объявлений 

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

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

0 голосов
/ 04 марта 2019

Изменения CSS ниже .ads и .ads_element с использованием дисплея: изгиб и ширина: 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>
0 голосов
/ 04 марта 2019

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

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

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

...