时间戳

首页 > 解决方案 > flexbox 属性有问题

html - flexbox 属性有问题

问题描述

我有几个问题要解决，即 1- 为什么徽标类属性不起作用？2- 为什么类标题没有向右移动，即 justify-content: flex-end not working 或者还有其他方法可以做到这一点？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;
}

标签： htmlcssflexbox

解决方案

这是因为在您的 HTML 中您使用的是 id, #，但您的 CSS 的目标是 class .。将您的 CSS 改为：

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

推荐阅读