前端之家

  1. 首页
  2. 问答

Flexbox在同一Flexbox中添加列和行

• 问答

因此，我试图创建一个具有侧边栏的布局，然后在其右侧添加四个元素，但是我该如何灵活地选择一项：行和其他列，有没有办法混合这些还是不好的做法？

<header>
  <div class="logo">
    <img src="//cdn.shopify.com/s/files/1/1813/5651/t/28/assets/logo.png?37614">
  </div>
  <div class="nav">
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
  </div>
  <div class="settings">
    <img src="https://via.placeholder.com/50.png/">
    <img src="https://via.placeholder.com/50.png/">
  </div>
</header>

<div class="content">
  <div class="sideBar">
    <h1>Sidebar</h1>
  </div>
  <div class="patientCard">
    <p>Lorem ipsum,dolor sit amet consectetur adipisicing elit. Corporis,saepe animi quisquam maxime,voluptatibus optio natus debitis ipsum delectus eveniet fugiat? Quas sed magnam consectetur accusantium sequi! Sequi,nobis ut!</p>
  </div>
</div>
<div class="videoCard">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia odit,quam doloremque dolor praesentium fuga dignissimos. Vero quod necessitatibus ex consequatur laudantium,nemo,voluptate hic,optio autem incidunt sit quisquam.</p>
  </div>


body,h1 {
  padding: 0px;
  margin: 0px;
}
header {
  display: flex;
  background: linear-gradient(0deg,#3387FE,#3387FE);
  box-shadow: 0px 3px 30px rgba(107,146,173,0.2);
  align-items: center;
  height: 100px;
  padding: 0px 20px;
  .logo {
    flex: 1;
    img {
      width: 50px;
    }
  }
  .nav {
    a {
      font-size: 24px;
      color: #fff;
      margin: 0px 5px;
      text-decoration: none;
      border-bottom: 3px solid #fff;
    }
  }
  .settings {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    img {
      border-radius: 50%;
      height: 50%;
      margin-left: 10px;
    }
  }
}

.sideBar {
  height: 100vh;
  background-color: #313131;
  width: 30%;
  h1 {
    color: #fff;
    padding: 10px;
  }
}

.content {
  display: flex;
  .patientCard {
    background-color: #ddd;
    border: 1px solid #fff;
    margin: 30px;
    padding: 10px;
    height: 20%;
    border-radius: 3px;
  }
  .videoCard {

  }
}

这是笔的链接：https://codepen.io/jacksonrose/pen/MWWQRqo

这就是我要实现的目标

Flexbox在同一Flexbox中添加列和行

bugandang 回答：Flexbox在同一Flexbox中添加列和行

您可以使用 flex-child 作为 flex-container 来满足您的需求。
从您提供的图片说明中，我举了一个简单的例子

.header {
  border: 1px solid red;
  text-align: center;
}

.container {
  display: flex;
}

.container .sidebar {
  border: 1px solid red;
  flex: 1;
}

.container .content {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
  flex: 3;
  padding: 1rem;
}

.container .content .card {
  border: 1px solid red;
  text-align: center;
}

.container .content .content-grid {
  display: flex;
  flex: 1;
}

.content-grid__aside {
  flex: 1;
}

.content-grid__column {
  flex: 2;
}

.card-1 {
  width: 100%;
  margin-bottom: 1rem;
}

.card-2 {
  height: 100%;
  margin-right: .5rem;
}
<header class="header">
  <h1>Header</h1>
</header>
<div class="container">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="content">
    <div class="card card-1">Card 1</div>
    <div class="content-grid">
      <div class="content-grid__aside">
        <div class="card card-2">Card 2</div>
      </div>
      <div class="content-grid__column">
        <div class="card card-3">Card 3</div>
        <div class="card card-4">Card 4</div>
      </div>
    </div>
  </div>
</div>

一切都与您使用正确的flexbox属性进行的算法有关。
如果您想使用Flexbox

cssflexboxhtml
本文链接：https://www.f2er.com/3161726.html

大家都在问