文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在CSS中将flexbox的一行划分为2列，并在786px屏幕宽度上显示全宽？

问如何在CSS中将flexbox的一行划分为2列，并在786px屏幕宽度上显示全宽？
EN

Stack Overflow用户

提问于 2021-03-30 23:32:38

回答 1查看 76关注 0票数 0

我正在尝试使用flexbox设计一个带有CSS的html页面。图片如下：enter image description here

我遇到的挑战是，在一个更大的屏幕上，我想在一行上对齐div3和div4，在max-width: 768px的媒体查询上，在一行上显示所有div。

对于我到目前为止所做的工作，我已经能够以全宽显示所有的div(我知道它应该在媒体查询上: 768px)，但我遇到的挑战是将div3和div4的第3行分开。

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>

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-30 23:42:09

您可以将div 3和div 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>

票数 3

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

原文链接：

https://stackoverflow.com/questions/66873972

复制

相似问题

问如何在CSS中将flexbox的一行划分为2列，并在786px屏幕宽度上显示全宽？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中将flexbox的一行划分为2列，并在786px屏幕宽度上显示全宽？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中将flexbox的一行划分为2列，并在786px屏幕宽度上显示全宽？
EN