如何使一个弯曲的项目收缩在第二轴?
例如,我有一个容器,里面有很多物品。它们都位于列中,但我希望它们的宽度也可以缩小:
.container {
display: flex;
flex-direction: column;
.item {
width: 200px;
flex: 0 1 @item-height;
//flex-shrink here means Y-axis. How to set flex-shrink for X-axis??
}
}
我最近一直在和display:flex玩,因为我看到它变得越来越流行了。在一个快速测试中,使用flex和非flex方法,我意识到,在使用flex时,我的宽度和边距总是被尊重的。这是一个很好的方法,考虑到我很可能需要一个在元素之间的阴沟呢?此外,跨度之间的差距在哪里?这就是我的意思:
<div class="container">
<div class="box">
<span class="inner-box">This gives me a 30px X 60px</span>
我正在制作一个带有无序列表的导航栏。我用的是柔性盒。
以下是代码:
/* navbar */
.top-navbar {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 4%;
}
.top-nav-list {
flex: 0 1 auto;
/* I have to change the grow & basis to get my desired result */
}
.top-nav-list li {
display: inline-
为什么在此实现中没有应用100%宽度(其中类uk-width-1-1应用于网格容器子容器的嵌套div ):
<div uk-grid>
<!-- column 01 -->
<div>
<!-- this will be a row, stacked -->
<div class="uk-width-1-1 mine">Row 01</div>
<!-- this will be a row, stacked -->
<
我偶然发现了一些发生在我的弹性子项目上的事情,如所示。
这是代码:
<div style="position:absolute; top:10px; left:10px; background-color:yellow; height:50px; width:200px; display:flex; flex-direction:column;">
<div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text
嗨,伙计们,这里是详细信息的代码页,包括html:。
body {
display: flex;
margin: 0;
flex-direction: column; // so here i am using body tag as overall container
min-height: 100vh;
background: #2c3e50;
}
header {
display: flex;
justify-content: space-between;
}
main {
display: flex; // <-here the main ht