Возникли проблемы со свойствами flexbox
У меня есть несколько проблем, которые нужно исправить, это 1- Почему свойства класса логотипа не работают? 2- Почему заголовок класса не перемещается вправо, т.е. justify-content: 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;
}
Ответы 2
Это потому, что в вашем HTML вы используете идентификатор #, но ваш CSS нацелен на класс .. Вместо этого измените свой CSS на это:
#logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
Осталось ответить еще на 3 вопроса ;-)
Как сказал Дэниел, вы должны убедиться, что не путаете селекторы
#idи.classв своей разметке / CSS. В вашей таблице стилей вы должны использовать#logoвместо.logo.Есть несколько способов выровнять элементы в заголовке. В приведенном ниже примере я прикрепил
justify-content: space-between;к div.header, который выровняет любые прямые дочерние элементы с равным количеством оставшегося свободного пространства между ними. Есть и другие способы сделать это ... это всего лишь один из вариантов. Вы можете поиграть с полями, отступами и другими значениями flexbox, чтобы увидеть, что лучше всего подходит для вас.Предоставление контейнера
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>
Спасибо за это, не знаю, как я это пропустил :-)