flex-container.min-width：flex-items.min-width？

Posted 2023-03-05

【中文标题】flex-container.min-width：flex-items.min-width？

【英文标题】：flex-container.min-width: flex-items.min-width?

【发布时间】：2018-02-26 09:35:36

【问题描述】：

如果我调整窗口的大小小于最小宽度弹性项目的总和（此处为 653 像素），则会出现一个滚动条，但弹性框采用窗口的当前大小并且弹性项目不会获得红色背景，我想知道如何在不输入特定值的情况下为 flexbox 容器设置最小宽度

 #topbanner  min-width: 653px; 

我不想缩小弹性项目，而是通过 css 方法来实现：

flexbox.min-width = (flex_items_min_width += flex-item[n].min-width)

<div id="main">
<div id="topbanner">
    <div id="topbanner_content">
        <div id="topbanner_icon">
            <a href="#">
                <img src="" id="icon"/>
            </a>
        </div>
        <div id="topbanner_searchbar">
            <form method="get" action="">
                <input id="topbanner_searchbar_input" type="text" name="text" placeholder="Search..."/>
                <input type="submit" hidden />
            </form>
        </div>
        <div id="main_button_unlogged">
            <a href="#">Login</a>
            <a href="#">Register</a>
        </div>
    </div>
</div>

https://codepen.io/papawa/pen/oGjMaK/

【问题讨论】：

对不起；我对你真正在寻找什么感到有点困惑。您是说希望在缩小宽度时将“登录”和“注册”下拉到搜索栏的下方，而不是从页面右侧推开？跨度>

codepen.io/anon/pen/GMpXNm

更新帖子，对不起我的英语和解释

【参考方案1】：

flexbox 采用窗口的当前大小，而 flex-items 不采用 获得红色背景，... ...我怎样才能为 flex 容器制作 min-width 无需输入特定值

要解决您将main 设为内联元素的问题，因此它会随内容增长，然后使其表现 为一个块（至少占用其父级的全宽），请给出它min-width: 100%

#main

    display:inline-flex;        /*  changed  */
    min-width: 100%;            /*  added  */
    ...

Updated codepen

堆栈sn-p

*

    box-sizing: border-box;


body

    margin:0;
    padding: 0;
    background-color: green;


#main

    display:inline-flex;
    min-width: 100%;
    flex-flow:column;
    margin: 0;
    padding: 0;


/* TOPBANNER */
#topbanner

    flex: 1 1 auto;
    margin: 0;
    padding: 20px;
    background-color: red;


#topbanner_content

    display: flex;
    align-items: center;


#topbanner_icon

    background-color: black;
    flex: 0 0 auto;
    height: 120px;
    width: 120px;


#topbanner_searchbar

    flex: 1 1 0;
    display: flex;


#topbanner form

    margin: 0;
    flex: 1 1 0;
    display: flex;


#topbanner_searchbar_input

    height: 40px;
    
    padding-left: 40px;
    
    flex: 1 1 auto;
    
    border-style: none;
    border-radius: 5px;
    
    font-size: 20px;
    font-family: sans-serif;
    color: grey;

/* UNLOGGED */
#main_button_unlogged

    flex: 0 0 auto;
    
    width: 230px;
    display:flex;


#main_button_unlogged a

    flex: 1 1 0;
    
    display: flex;
    
    align-items: center;
    justify-content: center;
    
    margin: 0px 2px;
    
    height: 40px;
    
    border: solid 1px;
    border-radius: 5px;
    
    color: ghostwhite;
    transition: color .15s ease-in-out;
    
    text-decoration: none;
    
    cursor: pointer;

<div id="main">
  <div id="topbanner">
    <div id="topbanner_content">
      <div id="topbanner_icon">
        <a href="#">
          <img src="" id="icon" />
        </a>
      </div>
      <div id="topbanner_searchbar">
        <form method="get" action="">
          <input id="topbanner_searchbar_input" type="text" name="text" placeholder="Search..." />
          <input type="submit" hidden />
        </form>
      </div>
      <div id="main_button_unlogged">
        <a href="#">Login</a>
        <a href="#">Register</a>
      </div>
    </div>
  </div>
</div>