时间戳

首页 > 解决方案 > 如何将 CSS 中的 flexbox 行分成 2 列并在 786px 屏幕宽度上显示全宽？

html - 如何将 CSS 中的 flexbox 行分成 2 列并在 786px 屏幕宽度上显示全宽？

问题描述

我正在尝试使用 flexbox 使用 CSS 设置 html 页面的样式。下图： 在此处输入图像描述

我面临的挑战是，在更大的屏幕上，我希望将 div3 和 div4 对齐在单行上，并在最大宽度：768px 的媒体查询上，在单行上显示所有 div。

对于我到目前为止所做的事情，我已经能够以全宽显示所有 div（我知道它应该在媒体查询上：768px）但是面临的挑战是将第 3 行拆分为 div3 和div4。

HTML

*{
    padding: 0;
    margin: 0;
}

body,
html,
.container-1{
    width: 100%;
    height: 100%;
}

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

#box-1{
    flex:1;
    background: #00B7EB;
    text-transform: uppercase;
    text-align: center;
}

#box-2{
    flex:1;
    background: #FF0000;
    text-transform: uppercase;
    text-align: center;
}



#box-3{
    flex:1;
    background: #00FF00;
    text-transform: uppercase;
    text-align: center;
}


#box-4{
    flex:1;
    background: #800080;
    text-transform: uppercase;
    text-align: center;
}


#box-5{
    flex:1;
    background: #444444;
    text-transform: uppercase;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>My CSS is Easy</title>
</head>
<body>
<div class="container-1">

    <div id="box-1">
        header
    </div>
        
    <div id="box-2">
       hero
    </div>

    <div id="box-3">
        content
    </div>
       
    <div id="box-4">
        sidebar
    </div>

    <div id="box-5">
       footer
    </div>

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

标签： htmlcssflexbox

解决方案

您可以将您的 div 3 和 4 放在一个父项中，并给它们一个最小宽度，即您希望它们折回的宽度的一半。像这样

* {
  padding: 0;
  margin: 0;
}

body,
html,
.container-1 {
  width: 100%;
  height: 100%;
}

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

#box-1 {
  flex: 1;
  background: #00b7eb;
  text-transform: uppercase;
  text-align: center;
}

#boxContainer {
  flex: 1;
  background: #00ff00;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
}
#box-2 {
  flex: 1;
  background: #ff0000;
  text-transform: uppercase;
  text-align: center;
}

#box-3 {
  flex: 1;
  min-width: 384px;
  background: #00ff00;
  text-transform: uppercase;
  text-align: center;
}

#box-4 {
  min-width: 384px;

  flex: 1;
  background: #800080;
  text-transform: uppercase;
  text-align: center;
}

#box-5 {
  flex: 1;
  background: #444444;
  text-transform: uppercase;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>My CSS is Easy</title>
  </head>
  <body>
    <div class="container-1">
      <div id="box-1">header</div>

      <div id="box-2">hero</div>
<div id="boxContainer">
    
    <div id="box-3">content</div>
    
    <div id="box-4">sidebar</div>
</div>

      <div id="box-5">footer</div>
    </div>
  </body>
</html>

推荐阅读