相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我是HTML新手,正在为我的家庭/自我项目创建一个网站,我遇到了一个小问题.我试图在文本两侧的标题内插入一个徽标.由于以下原因,我能够在文本的左侧获取图像:

徽标图像和H1标题在同一行

但是,我遇到了将图像放到文本另一侧的问题.

header.solid
{
  border-style: solid;
  border-width: 2px;
}

.header img
{
  float: left;
  width:75px;
  height:75px;
}

.header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}


 <div class="header">
  <header class="solid">
  <img src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp;  &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1>
  </header>
 </div>

非常感谢任何帮助,如果这是一个简单的修复道歉

编辑:道歉所有,当我发布代码时,我删除了第二个img标记

这是目前的情况.

<div class="header">
<header class="solid">
  <img class="leftimg" src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>TEST</b></h1>
  <img class="rightimg" src="Pictures/Star_Img.png" alt="star"/>
</header>
</div> …

我是html和css的新手.我知道在我的文本编辑器(括号)中,文本会更改关键字的颜色,但是"空格之间"不会被识别,尽管它是其中一个选项.其他的工作.(比如"中心")

基本上我正在尝试做的是当页面至少为768px时,在页面上横向展开我的3个图像.这是我的索引的一部分:

<main class="main-area">
    <section class="box">
        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-blue.jpg">

                <div class="box-text">
                    <h2 class="box-title">Blue Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-purple.jpg">

                <div class="box-text">
                    <h2 class="box-title">Purple Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-orange.jpg">

                <div class="box-text">
                    <h2 class="box-title">Orange Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>
    </section>
</main>
<!-- Close the main section -->

我认为通常人们会合并他们的样式表,但我的老师要我分开做.这是一个css文件:

    /*
primary style sheet
*/
@import url('CSS/accessibility.css');
@import …