Flexbox中的引导列不包裹在较小的屏幕上 [英] Bootstrap columns in flexbox not wrapping on smaller screens

问题描述

我有一段我的网站，我正在使用下面的CSS 2个div，还有一个 a 标签，以使内容在中心垂直对齐。

问题在于，对于flex样式属性，当窗口是< 768px理想情况下，内容会改变布局，每一个 col-md-4 会堆叠在一起。

这不会发生，相反，列变得非常瘦，并且显示在一起。有没有什么办法解决这一问题？最好尽量远离表格格式

  .about-us-nav {
 display：flex; 
 align-items：center; 
 justify-content：center; 
} 
 
 .about-us-nav a {
 font-size：20px; 
颜色：＃52361D; 
背景颜色：＃885A31; 
 border-color：＃52361D; 
 width：200px; 
 height：100px; 
 display：flex; 
 align-items：center; 
 justify-content：center; 
} 
 
 .how-help-container {
 margin-top：-25px; 
 display：flex; 
 align-items：center; 
 justify-content：center; 
 position：absolute; 
 z-index：2; 
 
  

解决方案

考虑：

1. 将 display：flex 成为一个弹性的容器，它有几个默认样式。

   
   
   

   其中一个默认值是 flex-direction：column 。
   
   

   另一个默认值是 flex-wrap：nowrap ，这将强制flex项目保留在一行（即使它们溢出容器）。

   
   
   

   从您的问题：
   
   

   
   

   问题在于，对于flex样式属性，当窗口
   为< 768px时，理想情况下内容会改变布局每一个 col-md-4
   都会堆叠在一起。这种情况没有发生，相反，
   列变得非常瘦，显示在
   一边。

   
   

   这听起来像Flex项目不包装。尝试添加到flex容器中：

     flex-wrap：wrap; 
     




2. 如果您希望flex项目在窗口< 768px，使用带有 flex-direction 属性的媒体查询。
   
   

     @media screen and（max-width：768px）{.your-selector-here {flex-direction：column;}} 
     

浏览器支持注意：

主要的浏览器，除了IE< 10个。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加前缀，请使用 Autoprefixer 。更多详情请参阅这个答案。

I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.

The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.

This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting

.about-us-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-nav a {
    font-size: 20px;
    color: #52361D;
    background-color: #885A31;
    border-color: #52361D;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-help-container {
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    z-index: 2;
}

解决方案

There are two things you should consider:

1. When you apply display: flex to an element it becomes a flex container which comes with several default styles.

   One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.

   Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).

   From your question:

   The problem is that with the flex style properties, when the window is <768px ideally the content would change layout and each col-md-4 would stack on top of one another. This is not happening, instead the columns just become really skinny and are displayed still side by side.

   It sounds like the flex items are not wrapping. Try adding this to the flex container:

   flex-wrap: wrap;
   

2. If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.

   @media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
   

Note on browser support:

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

这篇关于Flexbox中的引导列不包裹在较小的屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！