Question

我没有什么问题要解决，就是这样 1-为什么徽标类属性不起作用？ 2-为什么类标题没有向右移动，即证明内容：flex-end不工作或者其他方式可以做到这一点？ 3-我必须写display：flex;在所有父类或简单容器中，其中所有内容都足够了？ 4-如果我使用display：flex;在所有父类？非常感谢

--- --- HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content = "width=device-width", initial-scale = 1.0>
    <title>My Portfolio</title>
    <link rel="stylesheet" type="text/css" href="port.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div id="logo"> Logo </div>
            <div class="title">JAMES O BRAIN
            <div class="sub-title">FRONT-END MONK</div> </div>
        </div>
    <div class="container2">
        <div class="centre-picture">Central Pic</div>
        <div class="left-boxs">
            <div class="blue-box">Blue Box</div>
            <div class="grey-box">Grey Box</div>
            <div class="green-box">Green Box</div>
        </div>
    </div>
        <div class="bottom-boxs">
            <div class="featured-work">Featured Work</div>
            <div class="appify">APPIFY</div>
            <div class="sunflower">SUNFLOWER</div>
            <div class="bokeh">BOKEH</div>
        </div>
    </div>  
</body>
</html>

--- --- CSS

    .container {
    display: flex;
    flex-direction: column;
    border: 5px solid black;
    margin: 10px;
    padding: 50px;
}
.header {
    display: flex;
    border: 5px solid green;
}
.logo {
    /* why these all properties not working at all ? */
    border: 3px solid black;
    padding: 10px;
    margin: 10px;
}
.title { 
    border: 3px solid orange;
  justify-content: flex-end; /* why this property not working, how can i get this to right ?*/
    padding: 10px;
    margin: 10px;
}
.sub-title {
    border: 3px solid black;
    padding: 5px;
    margin: 5px
}
.container2 {
    display: flex;
    border: 5px solid red;
    margin: 10px;
    padding: 10px;
    height: 300px;

}
.centre-picture {
    border: 3px solid black;
    margin: 10px;
    padding: 10px;
}
.left-boxs {
    border: 3px solid goldenrod;
    margin: 10px;
    padding: 10px;
    order: -1;
}
.green-box {
    background-color: green;
    padding: 5px;
    margin: 5px 
}
.blue-box {
    background-color: blue; 
    padding: 5px;
    margin: 5px
}
.grey-box {
    background-color: grey;
    padding: 5px;
    margin: 5px 
}
.bottom-boxs {
    display: flex;
    border: 5px solid blue;
}
.appify {
    border: 3px solid black;
    margin: 10px;
    padding: 10px;
}
.sunflower {
    border: 3px solid black;
    margin: 10px;
    padding: 10px;
}
.bokeh {
    border: 3px solid black;
    margin: 10px;
    padding: 10px;
}

Answer 1

这是因为在您的HTML中，您使用的是ID #，但您的CSS定位的是.类。改为将CSS更改为：

#logo {
    /* why these all properties not working at all ? */
    border: 3px solid black;
    padding: 10px;
    margin: 10px;
}

Answer 2

正如Daniel所说，您应该确保在标记/ CSS中不要混淆#id和.class选择器。在样式表中，您应该使用#logo而不是.logo。
您可以通过多种方式对齐标题中的项目。在下面的示例中，我将justify-content: space-between;附加到.header div，它将使任何直接子元素与它们之间的空余空间对齐。还有其他方法可以做到这一点......这只是一个选择。您可以使用边距，填充和其他弹性框值来查看最适合您的方法。
给容器display: flex将对容器内的所有子元素产生影响，但不每个子容器中的内容。例如：如果您的容器中包含三个div元素，并且您为容器display: flex; justify-content: center;提供了容器，则会将每个div水平居中，但不每个div内的文字，图像等。在您的情况下，至少在此示例中，是的，您需要将display: flex;添加到标头内的每个div中，以便将flexbox属性应用于内部文本。

希望有所帮助。有关示例，请参阅下面的代码段。祝你好运！

＆＃13;

  

.container {
  display: flex;
  flex-direction: column;
  border: 5px solid black;
  width: 80%;
  padding: 50px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 5px solid green;
  padding: 10px;
}

#logo {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid black;
  padding: 10px;
}

.title { 
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid orange;
  padding-left: 10px;
}

.sub-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border: 3px solid black
}

＆＃13;

<div class="container">
  <div class="header">
    <div id="logo">Logo</div>
    <div class="title">JAMES O BRAIN
      <div class="sub-title">
        FRONT-END MONK
      </div> 
    </div>
  </div>
</div>

＆＃13;

有Flexbox属性的问题

2 个答案: