HTML和CSS Flexboxes

时间：2018-09-12 16:34:02

标签： html css flexbox

我试图了解和了解flexbox，但似乎很难做到，否则我的代码需要清理。以下是HTML和CSS。有没有办法写更少的代码？我觉得我的课程太多了，有一种更简单的方法。包装盒的说明附后。

Instructions #1 Instructions #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 :(得分：0)

我认为您不需要那么多class。

您可以选择flex父级（就像通过ID一样），然后使用>选择器直接向下移动flex子级。 / p>

可以共享许多规则，并且可以进行一些更新以减少要编写的选择器/规则的数量。

示例：

/* 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/

答案 1 :(得分：0)

我不确定您是要寻求意见还是要寻求答案来帮助您优化代码，或者不确定是使用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%;
}

如果您想了解更多信息，那么有很多关于Flex和网格设计的教程，Mozilla开发人员网络也是一个很好的资源。

相关问题
最新问题