Question

我希望将文本水平和垂直放置在弹性项目中。我到处都看了看，尝试了很多东西，但到目前为止似乎没有任何作用......

我可以在现有的容器中嵌套另一个flexbox容器吗？

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page1 {
  flex-grow: 1;
  min-height: 100%;
  background: lightblue;
}
#text1 {
  font-size: 160%;
  color: white;
  font-family: roboto, sans-serif;
}
.page2 {
  flex-grow: 1;
  min-height: 100%;
  background: cyan;
}
.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}
.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

＆＃13;

<div class="flex-container">
  <div class="page1">
    <p id="text1">blabla bla blablabla.</p>
  </div>
  <div class="page2"></div>
  <div class="page3"></div>
</div>

＆＃13;

Answer 1

是的，将flex-items也设置为flex-containers，如下所示。我还将margin: auto添加到#text1以使其居中。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 100%;
  background: lightblue;
}

#text1 {
  margin: auto;
  font-size: 160%;
  color: white;
  font-family: roboto, sans-serif;
}

.page2 {
  flex-grow: 1;
  min-height: 100%;
  background: cyan;
}

.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Portfolio </title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>

    <div class="flex-container">

      <div class="page1">
        <p id="text1"> blabla bla blablabla. </p>
      </div>


      <div class="page2">

      </div>

      <div class="page3">

      </div>

    </div>



  </body>
</html>

＆＃13;

在柔性项目中垂直和水平居中

1 个答案: