How can I space two items in a row using flexbox CSS?

Question

I'm new to the flexbox CSS system, so forgive my lack of knowledge. But in fact, there you have it, I managed to fix a problem that was none other than implementing a "max-width: 100%;" in the 2nd section which overflowed when we were on a screen of less than 600 pixels.

Now my first section looks weird, the SVG is shrunk, and everything is placed in the absolute center.

Here is how it is supposed to look like:

And finally, here is my code:

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap");
* {
  margin: 0;
}

body {
  width: 100%;
  box-sizing: border-box;
}

:root {
  --body-bg:#fff;
  --body-text:#000000;
  --theme_hero:linear-gradient(45deg, #FF6666, #FF9C75);
  --theme_hero_text:rgba(255, 255, 255, 0.8);
  --theme_hero_subtitle:rgba(255,255,255,0.5);
  --theme_hero_text_desc: rgba(255, 255, 255, 0.3);
  --theme_borders:rgba(190, 196, 211, 0.507);
  --theme_link:rgba(0,0,0,0.5);
  --theme_link-hover:rgba(37, 37, 37, 0.5);
  --theme_footer:#f6fcff;
  --box:#f4f4f4;
  /*! grid */
  --grid-p:rgba(0,0,0,0.5);
  --shadow:rgba(0,0,0,0);
  --content-theme:"";
}

._container {
  max-width: 1280px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

._row {
  display: flex;
  flex-wrap: wrap;
  min-width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
._row ._col {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.n-hero {
  height: 90vh;
  overflow: hidden;
  display: flex;
  background: var(--theme_hero);
  box-shadow: 0 0 10px var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
.n-hero .n-hero__title {
  font-family: "Arvo", serif;
  font-size: 60px;
  color: var(--theme_hero_text);
  font-weight: 700;
  line-height: 1em;
  animation: n-hero__title 1s ease forwards;
  opacity: 0;
}
.n-hero .n-hero__subtitle {
  font-family: "Arvo", serif;
  font-size: 16pt;
  color: var(--theme_hero_subtitle);
  max-width: 20em;
  font-weight: 400;
  animation: n-hero__subtitle 1s ease 0.3s forwards;
  opacity: 0;
}
.n-hero .n-hero__desc {
  color: var(--theme_hero_text_desc);
  font-size: 11pt;
  max-width: 28em;
  font-weight: 400;
}

@keyframes n-hero__title {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes n-hero__subtitle {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.n-hero {
  height: 90vh;
  overflow: hidden;
  display: flex;
  background: var(--theme_hero);
  box-shadow: 0 0 10px var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
.n-hero .n-hero__title {
  font-family: "Arvo", serif;
  font-size: 60px;
  color: var(--theme_hero_text);
  font-weight: 700;
  line-height: 1em;
  animation: n-hero__title 1s ease forwards;
  opacity: 0;
}
.n-hero .n-hero__subtitle {
  font-family: "Arvo", serif;
  font-size: 16pt;
  color: var(--theme_hero_subtitle);
  max-width: 20em;
  font-weight: 400;
  animation: n-hero__subtitle 1s ease 0.3s forwards;
  opacity: 0;
}
.n-hero .n-hero__desc {
  color: var(--theme_hero_text_desc);
  font-size: 11pt;
  max-width: 28em;
  font-weight: 400;
}

@keyframes n-hero__title {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes n-hero__subtitle {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.n-hero__banner {
  background-image: url("https://beta.nosfera.app/statics/_i/hero__banner.svg");
  width: 100%;
  height: 1024px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: n-hero__banner 1s ease 0.5s forwards;
  opacity: 0;
  position: relative;
}

@keyframes n-hero__banner {
  0% {
    opacity: 0;
    transform: rotate(-2deg) scale(1.1) translateX(100px);
  }
  50% {
    transform: rotate(3deg) scale(0.9);
  }
  100% {
    transform: rotate(1deg) scale(1) translateX(0);
    opacity: 1;
  }
}

<section class="n-hero  ">

        <div class="_container  ">
            <div class="_row    ">

                <div class="_col    ">
                    <h1 class="n-hero__title    ">Nosfera</h1>
                    <h6 class="n-hero__subtitle     ">Social network to connect with other artists around the world.</h6>
                    <!-- <p class="n-hero__desc  _spacing    ">Nosfera is a social network allowing any artist to connect with anyone
                        using sharing and compassion.</p>
                        <p class="n-hero__desc  ">Upload your works of art and let people give their opinions, collect as many likes and shares as possible!</p> -->
                </div>
    
                <div class=" _col    ">
                    <div class="n-hero__banner  "></div>
                </div>
    
            </div>
        </div>

    </section>

Michael Benjamin · Accepted Answer · 2021-01-29T14:55:39.833

3

Here's is the source of the problem:

._container {
    max-width: 1280px;
    min-height: 100%;
    margin: 0 auto;   <------ PROBLEM
    display: flex;
    flex-direction: row;
    align-items: center;
}

By setting horizontal auto margins, you are forcing the flex items to be centered (full explanation).

Also, ._container is a flex item, but it's set to auto width by default, meaning it will be the length of the content. Add flex: 1 to give it the full width of its parent container.

Adjust the height of the image in .n-hero__banner. It's set at 1024px, so it will overflow on smaller screens. Consider a dynamic height value, such as % or vh.

edited Jan 29 '21 at 14:55

answered Jan 29 '21 at 14:50

Michael Benjamin

346,931
104
581
701

Tried your code and it worked well until I noticed my content wasn't centered anymore, how can I manage to make it centered again? `justify-content:center` won't work. – Andrzej Jesztar Jan 29 '21 at 21:37
Can you post a codepen or jsfiddle here with what you have? It worked for me when I tested it. – Michael Benjamin Jan 29 '21 at 21:39
https://codepen.io/jesztar/pen/wvovebY here you go ! – Andrzej Jesztar Jan 29 '21 at 21:53
Add `justify-content: center` to `.n-hero`. – Michael Benjamin Jan 29 '21 at 22:17

Nick Pantelidis · Answer 2 · 2021-01-29T15:12:14.230

Change the ._container in css and add width: 100%; or flex: 1; (credits to @MichaelBenjamin) .Add also some padding in order to be more beautiful

._container {
    max-width: 1280px;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 20px;
}

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap");
* {
  margin: 0;
}

body {
  width: 100%;
  box-sizing: border-box;
}

:root {
  --body-bg:#fff;
  --body-text:#000000;
  --theme_hero:linear-gradient(45deg, #FF6666, #FF9C75);
  --theme_hero_text:rgba(255, 255, 255, 0.8);
  --theme_hero_subtitle:rgba(255,255,255,0.5);
  --theme_hero_text_desc: rgba(255, 255, 255, 0.3);
  --theme_borders:rgba(190, 196, 211, 0.507);
  --theme_link:rgba(0,0,0,0.5);
  --theme_link-hover:rgba(37, 37, 37, 0.5);
  --theme_footer:#f6fcff;
  --box:#f4f4f4;
  /*! grid */
  --grid-p:rgba(0,0,0,0.5);
  --shadow:rgba(0,0,0,0);
  --content-theme:"";
}

._container {
  max-width: 1280px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

._row {
  display: flex;
  flex-wrap: wrap;
  min-width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
._row ._col {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.n-hero {
  height: 90vh;
  overflow: hidden;
  display: flex;
  background: var(--theme_hero);
  box-shadow: 0 0 10px var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
.n-hero .n-hero__title {
  font-family: "Arvo", serif;
  font-size: 60px;
  color: var(--theme_hero_text);
  font-weight: 700;
  line-height: 1em;
  animation: n-hero__title 1s ease forwards;
  opacity: 0;
}
.n-hero .n-hero__subtitle {
  font-family: "Arvo", serif;
  font-size: 16pt;
  color: var(--theme_hero_subtitle);
  max-width: 20em;
  font-weight: 400;
  animation: n-hero__subtitle 1s ease 0.3s forwards;
  opacity: 0;
}
.n-hero .n-hero__desc {
  color: var(--theme_hero_text_desc);
  font-size: 11pt;
  max-width: 28em;
  font-weight: 400;
}

@keyframes n-hero__title {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes n-hero__subtitle {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.n-hero {
  height: 90vh;
  overflow: hidden;
  display: flex;
  background: var(--theme_hero);
  box-shadow: 0 0 10px var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
.n-hero .n-hero__title {
  font-family: "Arvo", serif;
  font-size: 60px;
  color: var(--theme_hero_text);
  font-weight: 700;
  line-height: 1em;
  animation: n-hero__title 1s ease forwards;
  opacity: 0;
}
.n-hero .n-hero__subtitle {
  font-family: "Arvo", serif;
  font-size: 16pt;
  color: var(--theme_hero_subtitle);
  max-width: 20em;
  font-weight: 400;
  animation: n-hero__subtitle 1s ease 0.3s forwards;
  opacity: 0;
}
.n-hero .n-hero__desc {
  color: var(--theme_hero_text_desc);
  font-size: 11pt;
  max-width: 28em;
  font-weight: 400;
}

@keyframes n-hero__title {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes n-hero__subtitle {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.n-hero__banner {
  background-image: url("https://beta.nosfera.app/statics/_i/hero__banner.svg");
  width: 100%;
  height: 1024px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: n-hero__banner 1s ease 0.5s forwards;
  opacity: 0;
  position: relative;
}

@keyframes n-hero__banner {
  0% {
    opacity: 0;
    transform: rotate(-2deg) scale(1.1) translateX(100px);
  }
  50% {
    transform: rotate(3deg) scale(0.9);
  }
  100% {
    transform: rotate(1deg) scale(1) translateX(0);
    opacity: 1;
  }
}

<section class="n-hero  ">

        <div class="_container  ">
            <div class="_row    ">

                <div class="_col    ">
                    <h1 class="n-hero__title    ">Nosfera</h1>
                    <h6 class="n-hero__subtitle     ">Social network to connect with other artists around the world.</h6>
                    <!-- <p class="n-hero__desc  _spacing    ">Nosfera is a social network allowing any artist to connect with anyone
                        using sharing and compassion.</p>
                        <p class="n-hero__desc  ">Upload your works of art and let people give their opinions, collect as many likes and shares as possible!</p> -->
                </div>
    
                <div class=" _col    ">
                    <div class="n-hero__banner  "></div>
                </div>
    
            </div>
        </div>

    </section>

How can I space two items in a row using flexbox CSS?

2 Answers2