Question

我试图设计一个包含3个项目的标题：

----------
   LOGO
----------  hidden navigation bar
----------
  BUTTON
----------

然后发展到：

----------
   LOGO
----------
li
li
li
li
----------
  BUTTON
----------

我希望徽标和按钮保持垂直居中，并使所有增长/移动从徽标容器的按钮/底部向下发生。我没有使用flexbox进行管理，但是我想使用它，这样我就可以更好地理解为什么它不起作用。

目前 - 除非我为徽标容器放置一个很大的高度 - 感觉有点笨拙 - 菜单上升和下降。我理想情况下喜欢使用justify-content: space-around但显然会将一些空间归因于隐藏菜单。

我觉得flex-shrink可能是一个解决方案，但我在这方面非常新手，并且不能让它发挥作用。这是我到目前为止所得到的：

https://codepen.io/nwoodward/pen/RMrRVZ

＆＃13;

$('#button').click(function() {
  $('.menu').toggleClass('menu--open', 700);
})

＆＃13;

header {
  background: #808080;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}

#logo-container {
  display: block;
  flex-grow: 2;
  background: red;
  width: 100%;
  height: 50px;
  text-align: center;
}

#logo-container img {
  height: 40px;
}

.menu {
  height: 0px;
  overflow: hidden;
  background-color: green;
}

.menu--open {
  height: auto;
}

#button {
  background: blue;
  width: 100%;
  height: 20px;
  text-align: center;
  cursor: pointer;
}

#rest {
  height: 500px;
  background: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="logo-container">
    <img src="https://trellis.co/wp-content/uploads/2015/09/hidden_meanings_facts_within_famous_logos_cover_image.jpg">
  </div>
  <div class="menu">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
  </div>
  <div id="button">Click Me</div>
</header>
<section id="rest">

＆＃13;

Answer 1

在这种情况下，我没有看到任何使用flexbox的充分理由。但要回答您的问题，关键是100px设置。

使用默认的折叠菜单，标题中元素的总体计算高度小于100px。但是，当菜单扩展时，它将大于final String ID_HELPER = "id_helper"; int id; public int getLastCreatedDocumentID() { id = 0; Query getLastID = db.collection(UNIVERSITY_COLLECTION).whereGreaterThan(ID_HELPER, 0) .orderBy(ID_HELPER, Query.Direction.DESCENDING).limit(1); getLastID.get().addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() { @Override public void onSuccess(QuerySnapshot documentSnapshots) { id=Integer.parseInt(documentSnapshots.getDocuments().get(0).get(ID_HELPER).toString()); } }); /* .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() { @Override public void onComplete(@NonNull Task<QuerySnapshot> task) { if (task.isSuccessful() && task.getResult().size() == 1) { id = Integer.parseInt(task.getResult().getDocuments().get(0).get(ID_HELPER).toString()); } } }); */ return id; } public void onClickbtn(View view) { // ********* University Collection ************** int newId=getLastCreatedDocumentID()+1; University item_u = new University (newId, "", "", "", new GeoPoint(0, 0)); db.collection("university").add(item_u); // ********* Exam Collection ************** final Exam item = new Exam(); db.collection(UNIVERSITY_COLLECTION).whereEqualTo(ID_HELPER,newId).get().addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() { @Override public void onComplete(@NonNull Task<QuerySnapshot> task) { DocumentSnapshot doc = task.getResult().getDocuments().get(0); String doc_id = doc.getId(); db.collection(UNIVERSITY_COLLECTION).document(doc_id).collection("exam").add(item); }。因此，它会产生将菜单首先推到顶部然后再推到底部的效果。

Flexbox下拉菜单位置和移动

1 个答案: