文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML和CSS Flexboxes

问HTML和CSS Flexboxes
EN

Stack Overflow用户
提问于 2018-09-13 00:34:02
回答 2查看 47关注 0票数 0

我正在尝试理解和学习flexboxes，我似乎在用一种困难的方式来做这件事，或者我的代码需要一些清理。下面是HTML和CSS。有没有办法写更少的代码？我觉得我的课太多了，有一种更简单的方法。包装盒的使用说明附在附件中。

Instructions #1 Instructions #2

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<!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>

​

css
flexbox
html
EN

回答 2

Stack Overflow用户

发布于 2018-09-13 00:49:09

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

您可以选择flex父对象(像您一样通过ID )，并使用>选择器直接向下移动Flex子对象。

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

示例：

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<!-- 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/

票数 0
EN

Stack Overflow用户

发布于 2018-09-13 02:25:34

我不确定你是在征求意见，还是仅仅是一个帮助你优化代码的答案，或者可能是一个使用flex for开发指南的链接，下面是一些css代码，如果你想要的话，可以查看和使用。

提示：

  1. 远离按ID设置样式，如果您知道具有相同属性的所有框都具有相同的属性创建类或元素样式，并使用method.
  2. Attribute选择器，则当您的元素或类都相似但状态不同时，选择器会很有用。

代码语言：javascript
复制
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开发者网络也是一个很好的资源。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52299828

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档