为什么不显示：flex；工作？

Question

我正在 Udacity 学习 HTML/CSS。我试图让第一行项目 col-2 和 col-10 彼此相邻地落在同一行，但 display: flex; 不起作用。有什么指点吗？

*{
 border: red solid 1px; !important
}

*{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

*{
 text-align: center;
}


}
.row {
 width : 100%;
 display: flex;
}

.col-1 {
 width: 8.33%;
}

.col-2 {
 width: 16.66%;
}

.col-3 {
 width: 25%;
}

.col-4 {
 width: 33.33%;
}

.col-5 {
 width: 41.66%;
}

.col-6 {
 width: 50%;
}

.col-7 {
 width: 58.33%;
}

.col-8 {
 width: 66.66%;
}

.col-9 {
 width: 75%;
}

.col-10 {
 width: 83.33%;
}

.col-11 {
 width: 91.66%;
}

.col-12 {
 width: 100%;
}

<!DOCTYPE HTML>

<head>
 <title>FRONT-END NINJA</title>
 <link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>

<body>

<div class="row">
 <div class="col-2">Udacity Logo</div>
 <div class="col-10">JANE DOETTE<br>FRONT-END NINJA</div>
</div>

<div class="row">
 <div class="col-12">IMAGE</div>
</div>

<div class="row">
 <div class="col-12">FEATURED WORK</div>
</div>

<div class="row">
 <div class="col-4">IMAGE1</div>
 <div class="col-4">IMAGE2</div>
 <div class="col-4">IMAGE3</div>
</div>

<div class="row">
 <div class="col-4">TEXT1</div>
 <div class="col-4">TEXT2</div>
 <div class="col-4">TEXT3</div>
</div>

</body>

谢谢，

阿比拉什

Answer 1

尝试 flex-direction 属性，如果将其设置为 row 应该可以吗？另外，如果你使用 flexbox，请使用 autoprefixer，这样你的东西就可以跨浏览器工作了。

Answer 2

您的 CSS 中有一个额外的右大括号引发错误

*{
    text-align: center;
}


} /* here */
.row {
    width : 100%;
    display: flex;
}

* {
  border: red solid 1px;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

<!DOCTYPE HTML>

<head>
  <title>FRONT-END NINJA</title>
  <link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>

<body>

  <div class="row">
    <div class="col-2">Udacity Logo</div>
    <div class="col-10">JANE DOETTE
      <br>FRONT-END NINJA</div>
  </div>

  <div class="row">
    <div class="col-12">IMAGE</div>
  </div>

  <div class="row">
    <div class="col-12">FEATURED WORK</div>
  </div>

  <div class="row">
    <div class="col-4">IMAGE1</div>
    <div class="col-4">IMAGE2</div>
    <div class="col-4">IMAGE3</div>
  </div>

  <div class="row">
    <div class="col-4">TEXT1</div>
    <div class="col-4">TEXT2</div>
    <div class="col-4">TEXT3</div>
  </div>

</body>

为什么不显示：flex；工作？

Why wouldn't display: flex; work?

html

css

flexbox