最小化屏幕时如何显示按钮?

Question

我希望搜索图标即使在屏幕最小化时也能一直显示。 如您所见，当您最小化屏幕时，搜索图标会隐藏。

如何使用 CSS 使其显示？

请参阅示例： 斯塔克闪电战

Answer 1

尝试将弹性包装属性添加到父级，如下所示：

nav {
display: flex;
flex-wrap: wrap;
}

另外，删除导航栏的固定高度：

@media (max-width: 599px){
.mat-toolbar-row, .mat-toolbar-single-row {
height: auto !important; 
}
}

Answer 2

您可以使用弹性框并使用换行功能： https://css-tricks.com/almanac/properties/f/flex-wrap/

弹性包装：无包装| 包装 | 包装-反转

.CSS

.flex-container {
flex-wrap: wrap;
}

看看他们的代码笔，它演示了当屏幕尺寸减小时换行是如何工作的(我想你提到它是最小化的(，搜索将跳到下一行(换行(： https://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3

从垫子工具栏的角度来看，如何定位工具栏内容： 工具栏不对其内容执行任何定位。这使用户能够完全按照自己的应用程序定位内容。

一种常见的模式是将标题放在左侧，将一些操作放在右侧。这可以通过显示轻松实现：flex：

CSS & HTML

.example-fill-remaining-space {
/* This fills the remaining space, by using flexbox. 
Every toolbar row uses a flexbox row layout. */
flex: 1 1 auto;
}

<mat-toolbar color="primary">
<span>Application Title</span>
<!-- This fills the remaining space of the current row -->
<span class="example-fill-remaining-space"></span>
<span>Right Aligned Text</span>
</mat-toolbar>

https://material.angular.io/components/toolbar/overview#positioning-toolbar-content