Question

我正在尝试创建一个水平菜单。我对flexbox的理解是，如果我想让元素水平堆叠，我应该应用CSS规则

display: flex
flex-direction: row;

但是，在下一页中，框垂直堆叠

div#navcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

div.navitem {
  color: #292929;
  height: 45px;
  width: 150px;
  padding: 5px;
  border-color: 292929;
  border-width: 2px;
  border-style: solid;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<div id="header">
  <div id="navcontainer">
    <div class="navitem"><a href="./index.html">home</a></div>
    <div class="navitem"><a href="./about.html">about</a></div>
    <div class="navitem"><a href="./services.html">services</a></div>
    <div class="navitem"><a href="./contact.html">contact</a></div>
  </div>
</div>

如何制作本身就是其他元素的Flex容器的css flex-items垂直堆叠？

Answer 1

将@Override public Dialog onCreateDialog(Bundle savedInstanceState) { super.onCreateDialog(savedInstanceState); _data = getArguments().getString("data"); // Use the Builder class for convenient dialog construction AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); LayoutInflater inflater = getActivity().getLayoutInflater(); View v = inflater.inflate(R.layout.dialog_text, null); EditText text = (EditText)v.findViewById(R.id.dialog_text);; text.setText(_data); builder.setView(v) .setPositiveButton(R.string.done, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { _listener.onDialogPositiveClick(JiffyDialogFragment.this); } }) .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { //JiffyDialogFragment.this.getDialog().cancel(); _listener.onDialogNegativeClick(JiffyDialogFragment.this); } }); // Create the AlertDialog object and return it return builder.create(); }设为display: flex。你也可以在没有flexbox的情况下获得它。使用#navcontainer和框的百分比值。

Answer 2

水平弯曲方向是默认方向，因此flex-direction: row是多余的。现在你有一个水平列表，其中包含垂直弹性框。

#navcontainer {
  display: flex;
  flex-wrap: nowrap;
}

.navitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

如何制作柔性容器也是水平堆叠的柔性物品？

2 个答案: