Итак, здесь я пытаюсь получить некоторые обзоры из своего кода, где мне нужно воспроизвести норвежский флаг с помощью flexbox.
Прежде всего следует сказать, что мои учителя сказали мне разделить флаг на две части, где мне пришлось вставить два из четырех квадратов в каждую, но я проигнорировал это, поскольку с такими заявлениями, как align-content: space-between; Я мог бы направить четыре квадрата прямо в углы и поиграть с полями, чтобы настроить их, поэтому я просто создал 4 контейнера (белые квадраты) с соответствующими элементами (красные квадраты).
Прежде чем я покажу свой код, я хочу сказать, что мне было так сложно работать с размером элементов, сначала попробуйте использовать flex-basis: ; и flex-grow: ; для автоматического определения размера квадратов, но у меня это не работает, поэтому я должен использовать width: ; и height: ;.
В связи со всем этим я хочу получить рекомендации по улучшению моего кода или лучшие альтернативы для достижения цели, а затем своего рода объяснение размера элементов.
Вот код:
body{
background-color: #00205B;
margin: 0;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.white-square1, .white-square2, .white-square3, .white-square4{
background-color: #ffffff;
display: flex;
align-content: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.white-square1, .white-square3{
margin: 0 50px 50px 0;
height: 43.8vh;
width: 25vw;
flex-grow: 1;
}
.white-square2, .white-square4{
margin: 0 0 50px 50px;
height: 43.8vh;
width: 50vw;
flex-grow: 2;
}
.white-square3{
margin: 50px 50px 0 0;
align-items: flex-end;
}
.white-square4{
margin: 50px 0 0 50px;
align-items: flex-end;
}
.red-square1, .red-square2, .red-square3, .red-square4{
background-color: #BA0C2F;
}
.red-square1, .red-square3{
margin: 0 50px 50px 0;
height: 37.8vh;
width: 25vw;
flex-grow: 1;
margin-left: 0;
}
.red-square2, .red-square4{
margin: 0 0 50px 50px;
height: 37.8vh;
width: 50vw;
flex-grow: 2;
margin-right: 0;
}
.red-square3{
margin: 50px 50px 0 0;
align-items: flex-end;
}
.red-square4{
margin: 50px 0 0 50px;
align-items: flex-end;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://codereview.stackexchange.com/questions/255823/style.css">
<title>Flexbox Actividad 3</title>
</head>
<body>
<section class="white-square1">
<div class="red-square1"></div>
</section>
<section class="white-square2">
<div class="red-square2"></div>
</section>
<section class="white-square3">
<div class="red-square3"></div>
</section>
<section class="white-square4">
<div class="red-square4"></div>
</section>
</body>
</html> 1 ответ
Идея быстрой реализации
Создать контейнер div с двумя divс внутри. Расположите те divs как крест вожделения, как на норвежском флаге. После этого дайте те divтолстая белая рамка, а красный цвет флага будет просто контейнером divс background-color.
Обзор кода
Sections неappropriateHTML-элемент в этом случае. Использоватьdivвместо этого.- Не используйте стиль
htmlтеги вродеbody. Вместо этого используйте классы CSS. Прочтите оcss specificity .red-square2, .red-square4{этот селектор имеет обаmarginиmargin-righсвойства сразу.margin: a b c dдолжно хватить.- Приведите в порядок свой CSS. В одной линии ты стиль
.red-square3и несколько строк ниже Вы стилизуете тот же элемент. Почему? Разве вы не можете использовать для этого одно правило CSS? 🙂
Идеи по улучшению
- Переместите цвет CSS к переменным и поместите их в отдельный файл.
Попробую вашу идею быстрой реализации, не задумывался и звучит интересно.
— Рой
Попробую вашу идею быстрой реализации, не задумывался и звучит интересно. О [CODE REVIEW]: Где я мог прочитать о том, как правильно использовать семантные теги? Я читаю HTML и CSS Джона Дакетта и не помню таких рекомендаций, и на самом деле это немного сбивает с толку, как использовать другие семантные теги. Так что лучше добавить класс к тегу body и добавить стиль к этому классу вместо тега body? Я этого не заметил, спасибо. Это потому, что сначала я добавляю объявления в целом, а затем изменяю значения в соответствии со своими потребностями.
— Рой
По определению, раздел — это элемент оболочки, который должен начинаться с какого-то заголовка
и т. Д.
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.источник: html.spec.whatwg.org/multipage/…— AdamKniec
Если мой ответ был полезен — отметьте его как решенное 🙂 Хорошего дня
— AdamKniec
В Code Review принято подождать пару дней, прежде чем выставлять галочки. Не переживайте.
— мачта