Как установить позицию X флексбокса в CSS?
на данный момент я просто играю с flexbox, пытаясь разобраться, на данный момент я сделал: со следующим кодом:
.container-1 {
display: flex;
flex-direction: row;
}
.container-1 div {
border: 1px #ccc solid;
padding: 10px;
}
.box-1 {
flex: 1;
flex: 0 0 0%;
}
.box-2 {
flex: 1;
flex: 0 0 0%;
}
.box-3 {
flex: 5;
flex: 0 0 60%;
}<div class = "container-1">
<div class = "box-1">
<h1>Box One </h1>
<p>This is my first paragraph!</p>
</div>
<div class = "box-2">
<h1>Box Two </h1>
<p>This is my second paragraph!</p>
</div>
<div class = "box-3">
<h1>Box Three </h1>
<p>This is my third paragraph!</p>
</div>
</div>Скажем, я хотел, чтобы мой абзац 3 был боковой панелью, которая появлялась в правой части экрана, как мне это сделать? Без гибкости я бы, наверное, использовал position: absolute; width: 20%; left: 80%;
или что-то в этом роде, но я не думаю, что это работает с флексбоксами. Спасибо за помощь!
Ваш код говорит box-3, что он не должен увеличиваться или уменьшаться, но также должен составлять 60% от оставшейся ширины (flex: 0 0 60%). Кроме того, ваши отдельные flex: 5flex: 1 ничего не сделают, так как вы сразу переопределяете их следующей строкой. Эти строки эквивалентны произнесению flex-grow: 1 или 5.
Ответы 3
Во-первых, если вы напишете одно и то же правило для одного и того же элемента дважды, оно будет переопределено:
.box-2 {
flex: 1;
flex: 0 0 0%; /* Only this will be interpreted as a rule */
}
Во-вторых, если вы хотите, чтобы третий элемент имел ширину 20% и располагался справа, вам нужно сделать что-то вроде этого:
.box-1 {
flex: 1;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 0 0 20%;
}
В-третьих, я бы не рекомендовал строить макеты с помощью flexbox, вместо этого я бы использовал сетки https://developer.mozilla.org/en/docs/Learn/CSS/CSS_layout/Grids
<style>
.container-1{
display: flex;
flex-direction: row;
}
.container-1 div{
border: 1px #ccc solid;
padding: 10px;
}
.box-1 {
flex: 1;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 0 0 20%;
}
</style>
<div class = "container-1">
<div class = "box-1">
<h1>Box One </h1>
<p>This is my first paragraph!</p>
</div>
<div class = "box-2">
<h1>Box Two </h1>
<p>This is my second paragraph!</p>
</div>
<div class = "box-3">
<h1>Box Three </h1>
<p>This is my third paragraph!</p>
</div>
</div>ОП пытается учиться flex и является вполне допустимым решением вместо сетки. Если вы собираетесь предложить сетку, добавьте решение grid к своему ответу.
Это то, чего вы хотите достичь? :)
.container-1 {
display: flex;
flex-direction: row;
}
.container-1 div {
border: 1px #ccc solid;
padding: 10px;
}
.box-1 {
flex: 1;
flex: 0 0 0%;
}
.box-2 {
flex: 1;
flex: 0 0 0%;
}
.box-3 {
flex: 5;
flex: 0 0 60%;
display: flex;
/* ADDED */
justify-content: space-between;
/* ADDED */
align-items: center;
/* ADDED */
}
.box-3 p {
/* ADDED */
writing-mode: vertical-rl;
/* ADDED */
}<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<div class = "container-1">
<div class = "box-1">
<h1>Box One </h1>
<p>This is my first paragraph!</p>
</div>
<div class = "box-2">
<h1>Box Two </h1>
<p>This is my second paragraph!</p>
</div>
<div class = "box-3">
<h1>Box Three </h1>
<p>This is my third paragraph!</p>
</div>
</div>Чтобы рассмотреть боковую панель, где бы она ни располагалась на экране (сверху как заголовок, снизу как нижний колонтитул, слева, справа), вам сначала нужно рассмотреть ее положение как блочного элемента в HTML. Для этого, пожалуйста, посмотрите, как я переупорядочил элементы HTML, порядок имеет значение, потому что нам вообще не нужно использовать position: absolute при рассмотрении позиционирования блочного элемента.
Теперь, когда это сделано, рассмотрим, как flex позволяет вам управлять интервалами и выравниванием блоков. Я попросил flex сделать space-between между контейнером box и контейнером боковой панели. Я также попросил flex управлять позиционированием элементов блока в контейнере блока div.
Это понимание имеет решающее значение, поскольку возможность заглянуть за пределы кода и визуализировать расположение элементов блока позволит вам найти более правильную реализацию.
Также в качестве бонуса я переименовал имена ваших классов, чтобы они больше соответствовали их назначению; и я также добавил немного цвета, чтобы вам было легче идентифицировать элементы блока.
Редактировать: я заметил, что вы используете свойство flex для установки ширины или, скорее, поведения flex-grow каждого блока. Я изменил свой фрагмент, чтобы отразить это на основе вашего кода, это должно обеспечить отзывчивое поведение.
.container {
display: flex;
align-items: space-between;
}
.container .box-container {
background-color: green;
border: 1px #ccc solid;
display: flex;
flex-direction: row;
width: 100%;
}
.container .box-container > div {
background-color: white;
flex: 0;
}
.container .box-container > div, .sidebar {
border: 1px #ccc solid;
padding: 10px;
}
.container .sidebar {
background-color: blue;
display: flex;
flex: 5;
}<div class = "container">
<div class = "box-container">
<div class = "box-1">
<h1>Box One</h1>
<p>This is my first paragraph!</p>
</div>
<div class = "box-2">
<h1>Box Two</h1>
<p>This is my second paragraph!</p>
</div>
</div>
<div class = "sidebar">
<h1>Box Three</h1>
<p>This is my third paragraph!</p>
</div>
</div>Хотя это может ответить на вопрос, вы предполагаете, что боковая панель всегда будет 100px, и это делает ее невосприимчивой.
@disinfor Я сделал это предположение добровольно, поскольку нет особых требований к отображению боковой панели, человек, задавший вопрос, может уточнить, если пожелает, и я могу перейти к ответам на его вопросы.
Конечно, но поскольку они использовали проценты в вопросе и использовали гибкость, я бы предположил, что отзывчивость является частью исходного вопроса. Ответ, безусловно, работает.
@disinfor Я принял ваш комментарий и внес изменения, чтобы позволить flex-grow быстро определять размер боковой панели.
Вы имеете в виду, что хотите, чтобы
box-3был меньше и правее, а другие поля заполняли оставшееся пространство? Или просто абзац вbox-3должен быть справа?