Я хочу исправить гибкие элементы при изменении размера окна - PullRequest
0 голосов
/ 19 апреля 2020

Я хочу сохранить гибкие элементы при изменении размера окна ... пожалуйста, помогите мне ... Я использовал минимальную ширину, но она не работала хорошо ... что со мной?

.sticky2 {
  position: fixed;
  z-index: 100;
  min-width: 100%;
  height: 50px;
  top: 0px;
  left: 0;
  /* flex-wrap: nowrap; */
  flex-wrap: wrap;
}

  h2 {
  display: inline-block;
}

header {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* flex-wrap: nowrap; */
  /* max-width: 1384px;
  min-width: 1014px; */
  /* height: 100%; */
  margin: 0 auto;
  /* z-index: 200; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-top: 50px; */
  background-color: rgb(102, 185, 102);
  transition: 0.6s;
  /* padding: 5px 0; */
  padding: 10px 0;
  flex-wrap: wrap;
}
/*  */
/*header 높낮이 패딩을 주니까 scroll 길이가 맞네*/
/*  */

header.sticky {
  background-color: #fff;
  padding: 20px 0;
  /* min-width: 100%; */
  /* height: 50px; */
  flex-wrap: wrap;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
header h1 {
  padding-left: 160px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.d {
  padding-right: 180px;
  flex-wrap: nowrap;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.header-1 {
  margin-right: 30px;
  border-radius: 20px;
  padding: 8px 15px;
  background-color: rgb(171, 235, 171);
  cursor: pointer;
  font-weight: 700;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.header-1,
.header-2,
.header__logo {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.header-1:hover {
  background-color: hotpink;
  transition: all 0.9s;
}
<div class="sticky2">
  <header class="sticky">
    <h1 class="header__logo">world pet</h1>
    <div class="d">
      <span class="header-1">reservation</span
      ><span class="header-2">ask</span>
    </div>
  </header>
</div>

Как сохранить сгибаемые элементы при изменении размера окна?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...