CODEWITHSUNDEEP
htmlcssflexbox
Slush-Puppy
Slush-Puppy

Reputation: 49

Is there a way to make two elements inline with each using flex?

.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>

I am wanting to have the two 's side by side and inline with each other. I have tried several ways using flex direction but have had no result - I wondered if I am missing something or need to replace something.

Upvotes: 0

Views: 77

Answers (3)

Thanveer Shah
Thanveer Shah

Reputation: 3323

Change your .inner to this

.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);
}

so instead of column we used row

Upvotes: 0

AJ_
AJ_

Reputation: 1485

So close! You just have to set flex-direction: row; inside .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>

Upvotes: 1

Alessio
Alessio

Reputation: 3610

Yes, just move from flex-direction: column; to flex-direction: row; which is the default value.

As the value says the direction of the elements will follow a column (one element below the other) or a row (one element beside the other).

.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>

Here's a useful guide to Flexbox

Upvotes: 2

Related Questions