文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用flex HTML CSS划分行

问如何使用flex HTML CSS划分行
EN

Stack Overflow用户

提问于 2021-07-25 14:41:50

回答 3查看 1.7K关注 0票数 0

我开始学习html，我想要创建一个在第四行有3行的屏幕。我知道它可以使用flex，这是我的html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="myStayle.css">
    <title>Document</title>
</head>
<body>
    <div class="contaner">
        <div class = "header">   
                <div style="display: inline-block;" class="row-1">LOGO</div>
                <div style="display: inline-block;"  class="row-1">Menu</div>

        </div>
        <div class="main">
                <div  class="row-2">picture</div>

                <div style="display: inline-block;" class="row-3">text1</div>
                <div style="display: inline-block;" class="row-3">text2</div>

                <div   class="row-4">pic</div>
                <div   class="row-4">link</div>
                <div   class="row-4">text</div>
        </div>
      

    </div>
    
    
</body>
</html>

这是我的CSS

.row-1 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
  }

  .row-2 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

  .row-3 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

  .row-4 {
    display: flex;
    flex-wrap: wrap;
    flex:1 1 30%;
    text-align: center;
    align-items: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

这是我的屏幕

这就是我想要创造的

我不知道如何把这4行分成三行。(图片+链接+同一行文本)

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-07-25 15:09:03

柔性箱的关键是将物品适当地分割成容器。在示例图中，您提供了一个很大的container，您可以进一步了解header和main。标头和主标在列布局中。main还包括四个容器(列布局)，每个容器包含更多项(行布局)。

div {
  border: 1px solid #000;
  text-align: center;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
}

.row-2 {
  display: flex;
}

.row-3 {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="myStayle.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <header>
      <div>LOGO</div>
      <div>Menu</div>
    </header>
    <main>
      <div class="row-1">picture</div>
      <div class="row-2">
        <div>text1</div>
        <div>text2</div>
      </div>
      <div class="row-3">
        <div>pic</div>
        <div>link</div>
        <div>text</div>
      </div>
      <div class="row-4">
        <div>footer</div>
      </div>
    </main>
  </div>
</body>

</html>

票数 1

Stack Overflow用户

发布于 2021-07-25 15:14:02

您可以简单地将HTML如下所示：

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.flex-row div {
    flex: 1;
    height: 40px;
    border: 1px solid black;
}
.flex-row .flex-child-b3 {
    flex: 0.5;
}

<div class="container">
    <div class="header flex-row">
        <div class="flex-child-b3">LOGO</div>
        <div>Menu</div>
    </div>
    <div class="flex-row">
        <div>picture</div>
    </div>
    <div class="flex-row">
        <div>text1</div>
        <div>text2</div>
    </div>
    <div class="flex-row">
        <div>pic</div>
        <div>link</div>
        <div>text</div>
    </div>
</div>

票数 1

Stack Overflow用户

发布于 2021-07-25 15:16:55

我相信你把一个弹性容器和一个挠性物品混淆了。您的每一行都应该是一个flex容器，其元素在flex-items中。这样做的正确方法应该是：

<div class="row-4">
  <div>link</div>
  <div>pic</div>
  <div>text</div>
</div>

然后，要有相同大小的列，您必须将每个子列的flex增长属性设置为"1"，或者也可以使用速记"flex:1“。

因此，CSS的基本形式应该如下所示：

.row-4 {
  display:flex
}

.row-4 > * {
  flex-1:
  text-align:center
}

文本对齐属性是我在这里使用的，用于在每一列中对文本和图像进行居中。虽然有很多方法可以做到这一点，但我觉得这是最简单的方法。

票数 0

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

原文链接：

https://stackoverflow.com/questions/68519657

复制

相似问题

问如何使用flex HTML CSS划分行
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用flex HTML CSS划分行EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用flex HTML CSS划分行
EN