<分区>
<分区>
我有一个带有 flex-direction: column 的 flexbox 部分，我只想将标题作为移动 View 中的第一个元素。
但我不知道如何使用订单属性来完成这项工作。
<section class="section section--team">
<img
class="section--team__image"
src="./imagens/requite.jpeg"
alt="Time da Instalura" />
<div class="section--team__content">
<h1 class="section--team__title">Nossa Equipe</h1>
<p class="section__text section--team__text">
O instalura foi criado por uma equipe compentente utilizando que há de
mais moderno na tecnologia, mas sempre primando pela experiência do
usuário.
</p>
<p class="section__text section--team__text">
Venha conhecer nossa equipe. Quem sabe até trabalhar conosco!
</p>
<ul class="section--team__links">
<li><i class="fas fa-users"></i> <a> Conheça nossa equipe </a></li>
<li>
<i class="fas fa-project-diagram"></i> <a> Trabalhe com a gente </a>
</li>
</ul>
</div>
</section>
我的部分样式表和元素。现在，我想帮助我会更清楚
&--team {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-top: 3rem;
padding-left: 3rem;
padding-right: 3rem;
background-color: $ocean-blue;
@media (min-width: 320px) and (max-width: 480px) {
flex-direction: column;
align-items: center;
justify-content: center;
}
&__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
}
&__title,
&__links li {
a {
color: $white;
margin-left: 2px;
}
.fa-users,
.fa-project-diagram {
color: $blue-lighten;
}
}
&__text,
&__links {
margin-left: 2rem;
@media (min-width: 320px) and (max-width: 480px) {
margin-left: 0rem;
}
}
&__title {
color: $white;
font-size: $font-xl;
align-self: center;
margin-bottom: $margin-sm;
}
&__text {
margin-bottom: $margin-xs;
}
&__links {
margin-top: $margin-xs;
li {
margin-top: $margin-xs;
}
}
&__image {
height: 10rem;
margin-bottom: 3rem;
border-radius: 3px;
}
}
最佳答案
Flexbox 排序发生在 flex-direction 和 flex-wrap 属性。 Flex-direction 指定主轴的方向。它可以采用以下值:
row(默认)主轴:从左到右row-reverse 主轴:从右到左column 主轴:从上到下column-reverse 主轴:从下到上Flex-wrap 定义 flex 元素是单行布局还是换行多行。它还控制交叉轴的方向。它可以有三个值:
nowrap(默认)在一行中布置 flex 元素；横轴
站在默认位置wrap 以多行布局 flex 元素；横轴位于
默认位置wrap-reverse 以多行布局 flex 元素；横轴是
逆转Flex items are displayed in the same order as they appear in the source document by default. The
orderproperty can be used to change this ordering.
下面是一个使用 flexbox 的 order 属性的例子:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }
.flex-item:nth-of-type(4) { order: 5; }
.flex-item:nth-of-type(5) { order: 2; }
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>仅供引用 flex-flow 属性是flex-direction 和flex-wrap 的简写属性。
可以查看this MDN深入研究的网络文档。
希望对您有所帮助:)
关于html - 如何在 Flexbox 中使用 Order，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58477346/