Флексбоксы HTML и CSS - PullRequest
Новая
       9

Флексбоксы HTML и CSS

0 голосов
/ 12 сентября 2018

Я пытаюсь понять и изучить флексбоксы, и мне кажется, что я делаю это нелегко, или мой код нуждается в некоторой очистке.Ниже приведен HTML и CSS.Есть ли способ написать меньше кода?Я чувствую, что у меня слишком много уроков, и есть более простой способ.Инструкции для ящиков прилагаются.

Инструкции № 1 Инструкции № 2 

/* Mateling GD430 Week 3 Flexbox*/


/*Change font family*/

body {
  font-family: 'Roboto', sans-serif;
}


/*Add margin to bottom of each box*/

section {
  margin-bottom: 50px;
}


/* FLEXBOX ONE*/

#number-1 {
  display: flex;
}


/*Box 1 Styles*/

.container-1>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
  width: 500px;
}


/*Box 2 Styles*/

.container-2>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 500px;
}


/*Box 3 Styles*/

.container-3>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 500px;
}


/* FLEXBOX TWO*/

#number-2 {
  display: flex;
}


/*Box 4 Styles*/

.container-4>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}


/*Box 5 Styles*/

.container-5>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}


/*Box 6 Styles*/

.container-6>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}


/* FLEXBOX THREE*/

#number-3 {
  display: flex;
  align-items: flex-end;
}


/*Box 7 Styles*/

.container-7>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
}


/*Box 8 Styles*/

.container-8>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 300px;
}


/*Box 9 Styles*/

.container-9>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 900px;
}


/* FLEXBOX FOUR*/

#number-4 {
  display: flex;
  flex-direction: row-reverse;
}


/*Box 10 Styles*/

.container-10>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
}


/*Box 11 Styles*/

.container-11>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 300px;
}


/*Box 12 Styles*/

.container-12>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 900px;
}
<!DOCTYPE html>
<!--Abby Mateling GD430 Week 3 Flexbox -->
<!-- 9/11/2018 -->

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mateling | GD430 | Week 3 | Flexbox</title>

  <!-- Add custom style sheet file -->
  <link rel="stylesheet" href="./css/style.css" type="text/css">

  <!-- Add Roboto Typeface -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

</head>

<body>
  <!-- FLEXBOX ONE-->
  <section id="number-1">
    <!-- Box 1 -->
    <div class="container-1">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>


    <!-- Box 2 -->
    <div class="container-2">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>


    <!-- Box 3 -->
    <div class="container-3">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>


  <!-- FLEXBOX TWO-->
  <section id="number-2">
    <!-- Box 4 -->
    <div class="container-4">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>


    <!-- Box 5 -->
    <div class="container-5">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>


    <!-- Box 6 -->
    <div class="container-6">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>


  <!-- FLEXBOX THREE-->
  <section id="number-3">
    <!-- Box 7 -->
    <div class="container-7">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>


    <!-- Box 8-->
    <div class="container-8">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>


    <!-- Box 9 -->
    <div class="container-9">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>


  <!-- FLEXBOX FOUR-->
  <section id="number-4">
    <!-- Box 10 -->
    <div class="container-10">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>


    <!-- Box 11-->
    <div class="container-11">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>


    <!-- Box 12 -->
    <div class="container-12">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>




</body>

</html>

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Я не уверен, что если вы спрашиваете мнение или просто ответ, который поможет вам оптимизировать ваш код, или, возможно, ссылку на руководство по разработке с помощью flex-box, ниже приведен код CSS, который вы можете посмотреть и использовать, если вы хотят.
СОВЕТЫ: ​​
1. Держитесь подальше от стилизации по ID, если вы знаете, что все поля с id имеют одинаковые свойства, создайте стиль класса или элемента и используйте этот метод.
2. Селекторы атрибутов полезны, когда у вас есть элементы или классы, которые похожи, но имеют состояние, в котором предпочтительнее другое состояние. 

section.flexie {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  font-size: 1vw;
  background: aliceblue;
}
section.flexie > div {
  /* Your div properties */
}
section.flexie > div[data-box='enlarged'] {
  width: 100%;
}

Если вы хотите узнать больше, есть хорошие учебники по гибкому и сеточному дизайну, и Mozilla Developer Network также является хорошим ресурсом.

0 голосов
/ 12 сентября 2018

Я не думаю, что вам нужно много class.

Вы можете выбрать flex родительский (через ID, как вы сделали) и использовать селектор >, чтобы перейти вниз по гибким дочерним элементам.

Можно поделиться многими правилами и сделать несколько обновлений, чтобы уменьшить количество селекторов / правил для записи.

пример: 

/* less css to write and use of id for variation */
section {
  display: flex;
  width: 800px;
  margin: 1em auto;
}

section>div {
  border: solid;
  flex: 1;
}

#number-1,
#number-4 {
  align-items: flex-start;
}

#number-3 {
  align-items: flex-end;
}

#number-3>div:last-of-type {
  flex: 2;
}

#number-4>div {
  margin: 0 5px;
}
<!-- Your HTML untouch -->
<!-- FLEXBOX ONE-->
<section id="number-1">
  <!-- Box 1 -->
  <div class="container-1">
    <div>
      <h4>This is Box 1</h4>
      <p>What's a box without type?</p>
    </div>
  </div>


  <!-- Box 2 -->
  <div class="container-2">
    <div>
      <h4>This is Box 2</h4>
      <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
    </div>
  </div>


  <!-- Box 3 -->
  <div class="container-3">
    <div>
      <h4>This is Box 3</h4>
      <p>This box has just a bit more type than Box 1.</p>
    </div>
  </div>

</section>


<!-- FLEXBOX TWO-->
<section id="number-2">
  <!-- Box 4 -->
  <div class="container-4">
    <div>
      <h4>This is Box 1</h4>
      <p>What's a box without type?</p>
    </div>
  </div>


  <!-- Box 5 -->
  <div class="container-5">
    <div>
      <h4>This is Box 2</h4>
      <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
    </div>
  </div>


  <!-- Box 6 -->
  <div class="container-6">
    <div>
      <h4>This is Box 3</h4>
      <p>This box has just a bit more type than Box 1.</p>
    </div>
  </div>

</section>


<!-- FLEXBOX THREE-->
<section id="number-3">
  <!-- Box 7 -->
  <div class="container-7">
    <div>
      <h4>This is Box 1</h4>
      <p>What's a box without type?</p>
    </div>
  </div>


  <!-- Box 8-->
  <div class="container-8">
    <div>
      <h4>This is Box 2</h4>
      <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
    </div>
  </div>


  <!-- Box 9 -->
  <div class="container-9">
    <div>
      <h4>This is Box 3</h4>
      <p>This box has just a bit more type than Box 1.</p>
    </div>
  </div>

</section>


<!-- FLEXBOX FOUR-->
<section id="number-4">
  <!-- Box 10 -->
  <div class="container-10">
    <div>
      <h4>This is Box 1</h4>
      <p>What's a box without type?</p>
    </div>
  </div>


  <!-- Box 11-->
  <div class="container-11">
    <div>
      <h4>This is Box 2</h4>
      <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
    </div>
  </div>


  <!-- Box 12 -->
  <div class="container-12">
    <div>
      <h4>This is Box 3</h4>
      <p>This box has just a bit more type than Box 1.</p>
    </div>
  </div>

</section>

Здесь я часто делюсь ссылкой, которую вы можете использовать в качестве учебного пособия или напоминания: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...