我正在尝试理解和学习 flexboxes，但我似乎很难做到，或者我的代码需要一些清理。下面是 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>最佳答案
我认为您不需要那么多 class。
您可以选择 flex 父级 (通过 ID 就像您所做的那样) 并使用 > 选择器直接进入 flex children。
许多规则可以共享，并且可以进行一些更新以减少要编写的选择器/规则的数量。
例子:
/* 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/
关于HTML 和 CSS flex 盒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52299828/