Возникли проблемы со свойствами flexbox - PullRequest
Новая
       4

Возникли проблемы со свойствами flexbox

0 голосов
/ 14 мая 2018

У меня есть несколько проблем, которые нужно исправить, 1- Почему свойства класса логотипа не работают? 2- Почему заголовок класса не перемещается вправо, то есть justify-content: flex-end не работает ИЛИ каким другим способом это можно сделать? 3- Должен ли я написать дисплей: flex; во всех родительских классах или просто в контейнере, в котором достаточно их всех? 4- Как это повлияет, если я использую дисплей: 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;
}

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

  1. Как сказал Дэниел, вам следует убедиться, что вы не путаете селекторы #id и .class в вашей разметке / CSS. В вашей таблице стилей вы должны использовать #logo вместо .logo.

  2. Есть несколько способов выровнять элементы в вашем заголовке. В приведенном ниже примере я прикрепил justify-content: space-between; к элементу .header, который будет выравнивать любые прямые дочерние элементы с равным количеством оставшегося пространства между ними. Есть и другие способы сделать это ... это всего лишь один из вариантов. Вы можете поэкспериментировать с полями, отступами и другими значениями flexbox, чтобы увидеть, что работает лучше для вас.

  3. Предоставление контейнера display: flex повлияет на все дочерние элементы внутри контейнера, , но не содержимое внутри каждого из этих дочерних элементов. Например: если у вас есть контейнер с тремя div элементами внутри него, и вы задаете контейнер display: flex; justify-content: center;, он будет центрировать каждый div по горизонтали, но не текст, изображения и т. Д. Внутри каждый div. В вашем случае, по крайней мере, в этом примере, да, вам нужно добавить display: flex; к каждому из div внутри заголовка, чтобы применить свойства flexbox к тексту внутри.

Надеюсь, это немного поможет. Смотрите фрагмент ниже для одного примера. Удачи! 

  

.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
}
<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>
0 голосов
/ 14 мая 2018

Это потому, что в вашем HTML вы используете идентификатор #, но ваш CSS нацелен на класс ..Вместо этого измените свой CSS: 

#logo {
    /* why these all properties not working at all ? */
    border: 3px solid black;
    padding: 10px;
    margin: 10px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...