flexbox

0热度

1回答

我试图在网站上构建团队成员列表。而且（总是）这个人有一个非常长的职位，推动他的工作描述下载。这造成了与其他工作描述不一致，设计师对此非常不情愿。我迄今发现的唯一的解决办法是在职位描述限制在3线，： font-size: 10px; height: 30px; line-height: 1; 但是，现在还没有，如果职位变为4线长的错误证明。此外，较小的屏幕甚至可能会将短文本换成长度超过4

0热度

2回答

纵横定心是柔性行的部分家长专区内的两个项目

使用引导4 ... 假设我有以下的柔性排一个div中，有字体真棒图标在每个图标下面的每个port-item和一个小文本实例。我想垂直和水平居中在他们的父母port-item div中的字体真棒图标和文本，我的2小时值得付出的努力和搜索一直是徒劳的。我想我已经在这个网站上搜索了大约15个主题并且什么也没有得到。我认为我的设置是独一无二的，因为排列顺序。 <div> <div clas

0热度

2回答

截断列表项中的单个文本块

我有一个项目列表，其中每个项目被分成3个部分。 <li>[long part(1)] [separator(2)] [important part(3)]</li> 我想第一部分（“长部分”）截断而不是换行。我可以得到第一部分不包装，而其他部分包装 - 但我无法弄清楚如何让浏览器截断第一部分。这里有一个codepen例如：https://codepen.io/fiver/pen/rGRev

0热度

1回答

如何使用flexbox编写此布局？

如何使用flexbox编写此布局？有我的解决方案，但无法正常工作。我可以用CSS网格修复，但IE11不能正确支持。您有任何建议/解决方案吗？ https://codepen.io/hamzaerbay/pen/KXJEWJ?editors=1100 <div class="box-wrapper"> <div class="box title">Web Developer, Desi

2热度

1回答

CSS Flex导航栏 - 如何？

第一次玩Flex，经过大量的阅读和玩，我还没有设法解决这个问题。我想要一个固定的导航栏。但这很容易，问题是如何将项目1对齐到项目2 & 3？不管我做什么，他们都分组。我确信你将能够向我展示我的noob错误，所以我说对 - 谢谢你！ .flex-container { display: -webkit-flex; display: flex; -webk

0热度

1回答

使菜单响应 - Flex

我想使这个菜单响应使用Flexbox和我不能为我的生活看到我做错了什么。我希望菜单选项在移动视图中彼此堆叠。使用Flex时我很好，但我无法找到这里的错误。任何帮助表示赞赏！这里是对代码的链接：code CSS： .tabs-menu { display: -webkit-box; display: -webkit-flex; display: -ms-f

2热度

4回答

Vertical-align在flex项上不起作用

我试图垂直集中flex盒元素中的纯文本。我决定使用属性display:table-cell与vertical-align: middle。但它似乎不能在Flexbox元素中正常工作。我怎样才能垂直集中它，理想情况下不使用包装或定位，并仍然用椭圆截断长文本？ .container { width: 400px; height: 400px; font-w

0热度

2回答

使用弹性布局将div对中到页面 - 角度材质2

我想在页面的中心制作一个卡片显示。当我把类进度向导放在一个像下面这样的独立div中。 <div class="progress-wizard" > <div fxLayout="row" fxLayoutAlign="center center"> <mat-card> <button mat-raised-button color="primary">Primar

4热度

2回答

中心只有一个div中的两个元素之一？

我有一个简单的网页，其中有一个.topnav酒吧和一个.container，其中有几个元素。我正在尝试将.container（而不是.topnav）居中放置在页面的body之内，以便它将垂直居中。然而，当我尝试过的造型body有： display:flex; align-items:center; justify-content:center; 无论是.topbar和.container居

0热度

2回答

引导4个垂直对齐文本将不会集中在卡

尝试垂直对齐文本中心在以下卡： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQs