Есть ли способ сделать два элемента встроенными в каждый с помощью flex? - PullRequest
Новая
       4

Есть ли способ сделать два элемента встроенными в каждый с помощью flex?

0 голосов
/ 19 июня 2020 

.col-1 {
  padding-right: 35px;
  padding-left: 35px;
}

.inner {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(75% - 5px);
  max-width: calc(75% - 5px);
  margin-left: calc(12.5% + 2.5px);
}

.inner:after {
  content: "";
  clear: both;
}

.inner:before {
  box-sizing: inherit
}

.inner:first-of-type {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  max-width: calc(50% - 10px);
}

picture img {
  min-width: 100%;
  max-width: 100%;
}
<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>

Я хочу, чтобы они располагались рядом друг с другом. Я пробовал несколько способов использования направления изгиба, но безрезультатно - я подумал, не упускаю ли я чего-то или нужно что-то заменить.

Ответы [ 3 ]

2 голосов
/ 19 июня 2020

Да, просто перейдите от flex-direction: column; к flex-direction: row;, которое является значением по умолчанию.

Как указано в значении, направление элементов будет следовать за столбцом (один элемент ниже другого) или строкой (один элемент рядом с другим). 

.col-1 {
  padding-right: 35px;
  padding-left: 35px;
}

.inner {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(75% - 5px);
  max-width: calc(75% - 5px);
  margin-left: calc(12.5% + 2.5px);
}

.inner:after {
  content: "";
  clear: both;
}

.inner:before {
  box-sizing: inherit
}

.inner:first-of-type {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  max-width: calc(50% - 10px);
}

picture img {
  min-width: 100%;
  max-width: 100%;
}
<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>

Вот полезное руководство по Flexbox

1 голос
/ 19 июня 2020

Так близко! Вам просто нужно установить flex-direction: row; внутри .inner. 

.col-1 {
  padding-right: 35px;
  padding-left: 35px;
}

.inner {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(75% - 5px);
  max-width: calc(75% - 5px);
  margin-left: calc(12.5% + 2.5px);
}

.inner:after {
  content: "";
  clear: both;
}

.inner:before {
  box-sizing: inherit
}

.inner:first-of-type {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  max-width: calc(50% - 10px);
}

picture img {
  min-width: 100%;
  max-width: 100%;
}
<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>
0 голосов
/ 19 июня 2020

Измените .inner на это 

.inner {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(75% - 5px);
  max-width: calc(75% - 5px);
  margin-left: calc(12.5% + 2.5px);
}

, чтобы вместо column мы использовали row

...