我是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>
这是问题的根源:
._container {
max-width: 1280px;
min-height: 100%;
margin: 0 auto; <------ PROBLEM
display: flex;
flex-direction: row;
align-items: center;
}
通过设置水平自动边距,您将强制弹性项目居中(完整说明)。
同样,它._container
是一个flex项目,但auto
默认情况下它设置为width,这意味着它将是内容的长度。添加flex: 1
以为其提供其父容器的完整宽度。
在中调整图像的高度.n-hero__banner
。设置为1024px,因此它将在较小的屏幕上溢出。考虑动态高度值,例如%
或vh
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句