Репликация норвежского флага с помощью CSS

Итак, здесь я пытаюсь получить некоторые обзоры из своего кода, где мне нужно воспроизвести норвежский флаг с помощью 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 ответ
1

Идея быстрой реализации

Создать контейнер div с двумя divс внутри. Расположите те divs как крест вожделения, как на норвежском флаге. После этого дайте те divтолстая белая рамка, а красный цвет флага будет просто контейнером divс background-color.

Обзор кода

  • Sections не appropriate HTML-элемент в этом случае. Использовать 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

  • 1

    В Code Review принято подождать пару дней, прежде чем выставлять галочки. Не переживайте.

    — мачта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *