时间戳

首页 > 解决方案 > 如何使用 flexbox CSS 将两个项目连续隔开？

html - 如何使用 flexbox CSS 将两个项目连续隔开？

问题描述

我是 flexbox CSS 系统的新手，所以请原谅我缺乏知识。但事实上，你有它，我设法解决了一个问题，就是max-width: 100%;在第二部分中实现一个“”，当我们在小于600像素的屏幕上时溢出。

现在我的第一部分看起来很奇怪，SVG 被缩小了，所有东西都放在了绝对中心。

在此处输入图像描述

以下是它的外观： 在此处输入图像描述

最后，这是我的代码：

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

标签： htmlcssflexbox

解决方案

这是问题的根源：

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

通过设置水平自动边距，您将强制弹性项目居中（完整解释）。

另外，._container是一个弹性项目，但auto默认设置为宽度，这意味着它将是内容的长度。添加flex: 1为其父容器的完整宽度。

调整图片的高度.n-hero__banner。它设置为 1024 像素，因此它会在较小的屏幕上溢出。考虑一个动态高度值，例如%或vh。

推荐阅读